自定义视图使用组件渲染

自定义视图不单单可以通过网站模块去实现，也可以通过组件设计器实现。如一些比较特定的数据展示方式。如自定义的表格视图、卡片视图等，都可以通过这种方式实现。

下面的例子我们将讲解如何用ElementUI的表格替换系统的表格。

效果图

自定义视图组件定义

组件设计器中创建组件，并将下方的定义粘贴到对应的版块，完成组件定义，组件中通过list参数，接收自定义组件视图传输过来的列表数据。

组件库依赖

该组件需要依赖ElementUI组件库

模板

<div style="width:100%;height:100%;position:relative">
    <el-table :data="list" style="width:100%">
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="age" label="年龄" width="180"></el-table-column>
        <el-table-column prop="desc" label="描述"></el-table-column>
    </el-table>
</div>

脚本

export default{
    props: {
        // 用于接收自定义视图的列表数据
        list: {
            type: Array,
            default:() => []
        },
    }
}

自定义视图配置

创建自定义视图模块，并添加对应的组件参数。