平谷网站建设服务,购物建设网站费用,长沙百度关键词推广,网站支付功能报价在实际需求中我们经常遇到各种奇葩的需求#xff0c;不足为奇。每个项目的需求各不相同#xff0c;实现功能的思路大致是一样的。
本文来具体介绍怎么实现table表格动态插入几列。
首先实现思路有2种#xff0c;
1. 插入的位置如果是已知的#xff0c;我知道在哪个标题的…在实际需求中我们经常遇到各种奇葩的需求不足为奇。每个项目的需求各不相同实现功能的思路大致是一样的。
本文来具体介绍怎么实现table表格动态插入几列。
首先实现思路有2种
1. 插入的位置如果是已知的我知道在哪个标题的后面插入这就好办了。 上图可以看出就是在地址和备注2列之间插入数据那就好办了。直接在地址后面写一个
el-table-columnwidth160v-forcolumn in tableColumns:keycolumn.prop:propcolumn.prop:labelcolumn.label/el-table-column
通过 for 循环 数组动态遍历出来就可以实现功能了。 el-table :datatableData borderel-table-column typeindex label序号 width120/el-table-columnel-table-column propdate label日期 width120/el-table-columnel-table-column propname label姓名 width120/el-table-columnel-table-column propphone label电话 width120/el-table-columnel-table-column propemail label邮箱 width120/el-table-columnel-table-column propaddress label地址 width120/el-table-columnel-table-columnwidth160v-forcolumn in tableColumns:keycolumn.prop:propcolumn.prop:labelcolumn.label/el-table-columnel-table-column propdes label备注 width120/el-table-column/el-table return {tableData: [],tableColumns: [{prop: 1001,label: 1001}, {prop: 1002,label: 1002},{prop: 1003,label: 1003}],} 2. 也可以这样写列全部用数组动态显示出来每列的顺序就看数组里面怎么排序给你返回了。 el-table :datatableData borderel-table-column typeindex label序号 width120/el-table-columnel-table-columnwidth160v-forcolumn in tableColumns:keycolumn.prop:propcolumn.prop:labelcolumn.label/el-table-column
/el-table return {tableData: [],tableColumns: [{prop: date,label: 日期},{prop: name,label: 姓名}, {prop: phone,label: 电话},{prop: email,label: 邮箱}, {prop: address,label: 地址}, {prop: 1001,label: 1001}, {prop: 1002,label: 1002},{prop: 1003,label: 1003},{prop: des,label: 备注}],
}
3. 还有1种情况就是不知道插入的顺序在哪随机动态的实现方法同方法2一样但是 全部列的数组是由后端返回给你的后端自己控制每列的排序。
今天就到这了。。。。。。
