vue+element 动态渲染表格

表格展示

表格动态渲染

1、el-table元素中注入data对象数组studentList，el-table-column中用prop属性来对应对象中的“键名”即可填入键值，用label属性来定义表格的列名。可以使用width属性来定义列宽。具体示例查看elementUI table组件示例代码地址：https://element.eleme.cn/#/zh-CN/component/table

2、使用 :label、:prop 等属性加冒号是v-bind:label的缩写，绑定一个属性值是动态变化的，不加冒号是常量固定值

3、使用  v-for 遍历元素，循环渲染元素或模板块，必须使用特定语法 alias in expression

4、v-for="(item, index) in columns"  columns数组，item当前遍历的元素别名，index索引 ，item.label,获取item数据中的label属性

5、通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据  scope.index,获取当前行索引，scope.row,获取当前行对象

模拟的数据

结合上面的模板代码查看

1、:data 的数据源是studentList

2、columns  列表属性数据

以上动态渲染表格成功