Using Component Rendering for Custom Views

Custom views can be implemented not only through website modules but also through the component designer, especially for specific data display methods like custom table views, card views, etc., which can all be implemented in this way.

The following example will explain how to replace the system's table with ElementUI's table.

Effect Diagram

Custom View Component Definition

Create a component in the component designer and paste the following definitions into the corresponding sections to complete the component definition. The component receives list data from the custom component view through the list parameter.

Component Library Dependency

This component depends on the ElementUI component library

Template

<div style="width:100%;height:100%;position:relative">
    <el-table :data="list" style="width:100%">
        <el-table-column prop="name" label="Name" width="180"></el-table-column>
        <el-table-column prop="age" label="Age" width="180"></el-table-column>
        <el-table-column prop="desc" label="Description"></el-table-column>
    </el-table>
</div>

Script

export default{
    props: {
        // Used to receive list data from custom view
        list: {
            type: Array,
            default:() => []
        },
    }
}

Custom View Configuration

Create a Custom View module and add corresponding component parameters.