Vue动态生成表格的行和列

当在开发项目的时候，固定的页面表格标题及内容不能满足需求，需要根据不同的需求动态加载不同的表格表头和表格的内容，具体的实现代码如下：

模板div class=' BoxShadow ' div style=' margin-top : 20px ' El-table : data=' tables ' ref=' multipleTable ' tooltip-effect=' dark ' style=' width : 100% ' @ selection-change=' selectArInfo ' El-table-column type=' selection ' width=' 45px '/El-table-column El-table-column-column标签='序号width=' 62px ' type=' index '/El-table-cold模板v-for='(col)在表格数据' El-table-cold可排序： how-overflow-tooltip=' true ' : prop=' col . dataitem ' : label=' col . dataname ' : key=' col . dataitem ' width=' 124 px '/El-table-cold/template El-table-cold label='操作width=' 80 ' align=' center ' template slot-scope=' scope ' El-button size=' mini ' class=' del-com ' @ click=' delTabColOne()' I class=' icon font icon-shanchu '/I/El-button/template/El-table-column/El-table/div/div/template脚本导入' ././assets/CSS/commlist。CSS“导入”././assets/CSS/commscoped。sass ' export default { data(){ return { tables : [{ xiaoxe 3360 }'福兰，滁中： '加芳，高中： '蒲庙，大学： '西安，颜九生： '西安，上银行： '北京},{晓雪： '南坊，滁中： '礼泉，高中： '礼泉，大学： '西安，颜九生： '西安，上银行： '南坊},{晓雪： '马山，滁中： '加芳，高中： '蒲庙，大学： '西安，颜九生： '重庆，上银行： '北京}]，tableData: [{ dataItem: '肖雪，数据名称： '小学}，{ dataItem: '楚中，数据名称： '初中}，{ dataItem: '高中，数据名称： '高中}，{ dataItem: 'daxue '，dataName: '大学}，{ dataItem: '严九生，数据名称： '研究生}，{ dataItem: '尚班，数据名称： '上班}] } }，methods: { //获取表格选中时的数据selectrinfo(val){ this。selecterr=val } } }脚本实现的效果如下图所示，这个只是一个小的简单示例，表格的数据都是写死的，在我们的项目开发的过程中，我们需要根据自己的开发需求去调用相应的接口，实现相应的表格内容。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。