Using Components to Render Controls

The platform supports common controls. If these controls cannot meet actual business needs, you can also implement custom controls through Custom Components.

The following example will explain how to use ElementUI's dropdown menu as a custom control and display it in the toolbar.

Effect Diagram

Custom Component Definition

Create a component in the component designer and paste the following definitions into the corresponding sections to complete the component definition. All contexts within the control can be passed as parameters to the component for interaction according to business needs.

Component Library Dependency

This component depends on the ElementUI component library

<div style="width:100%;height:100%;position:relative">
    <el-menu mode="horizontal" class="el-menu-demo" v-on:select="handleSelect">
        <el-menu-item index="1">
            Processing Center
        </el-menu-item>
        <el-submenu index="2">
            <template slot="title">
                My Workspace
            </template>
            <el-menu-item index="2-1">
                Option 1
            </el-menu-item>
            <el-menu-item index="2-2">
                Option 2
            </el-menu-item>
            <el-menu-item index="2-3">
                Option 3
            </el-menu-item>
            <el-submenu index="2-4">
                <template slot="title">
                    Option 4
                </template>
                <el-menu-item index="2-4-1">
                    Option 1
                </el-menu-item>
                <el-menu-item index="2-4-2">
                    Option 2
                </el-menu-item>
                <el-menu-item index="2-4-3">
                    Option 3
                </el-menu-item>
            </el-submenu>
        </el-submenu>
        <el-menu-item index="3" disabled>
            Message Center
        </el-menu-item>
        <el-menu-item index="4">
            <a href="https://www.informat.cn" target="_blank">
                Order Management
            </a>
        </el-menu-item>
    </el-menu>
</div>

Add Control

Add a control to the Toolbar Controls of any Data Table module, and select the type as Custom Component