网站建设视频百度网盘下载,温州外贸网站建设公司,智慧团建密码格式,长沙 微信群提示#xff1a;el-table表格动态添加列 文章目录 前言一、多组数据拼接二、多层级处理三、实际应用中#xff0c;为避免闪屏#xff0c;可以表格数据统一渲染总结 前言 需求#xff1a;富文本编辑器 一、多组数据拼接
templatediv classtest… 提示el-table表格动态添加列 文章目录 前言一、多组数据拼接二、多层级处理三、实际应用中为避免闪屏可以表格数据统一渲染总结 前言 需求富文本编辑器 一、多组数据拼接
templatediv classtestel-table :datatableData stripe stylewidth: 100%el-table-column propdate label日期 width180/el-table-columnel-table-column propname label姓名 width180/el-table-columnel-table-column propaddress label地址/el-table-columntemplateel-table-column v-foritem,index in addHeadColumn :propitem.key :labelitem.lable :keyindex/el-table-column/template /el-table/div
/templatescript
export default {name: HelloWorld,data () {return {tableData: [{id:1,date: 2016-05-02,name: 张三,address: 上海市普陀区金沙江路 1518 弄}, {id:2,date: 2016-05-04,name: 李四,address: 上海市普陀区金沙江路 1517 弄}, {id:3,date: 2016-05-01,name: 王五,address: 上海市普陀区金沙江路 1519 弄}, {id:4,date: 2016-05-03,name: 孙六,address: 上海市普陀区金沙江路 1516 弄}],customTableData:[],userTableData:[],addHeadColumn:[],}},created(){this.getcustomTableData();},methods:{//获取自定义表头数据getcustomTableData(){this.addHeadColumn [];this.customTableData [];//模拟接口调用延时setTimeout((){this.customTableData [{ id:1,name: 张三,age:16,gender:女},{ id:2,name: 李四,age:27,gender:男},{ id:3,name: 王五,age:38,gender:男},{ id:4,name: 孙六,age:49,gender:男}];this.userTableData [{ id:1,name: 张三,color:green,hobby:篮球},{ id:2,name: 李四,color:red,hobby:足球},{ id:3,name: 王五,color:blue,hobby:羽毛球},{ id:4,name: 孙六,color:orange,hobby:乒乓球}];this.addHeadColumn [{key:age,lable:年龄},{key:gender,lable:性别},{key:color,lable:幸运色},{key:hobby,lable:兴趣爱好},]//tableData为基础表格数据定制表头并渲染数据到tableData里let newTableData [];for(let i0;ithis.tableData.length;i){newTableData[i] this.tableData[i]||{};for(let j0;jthis.customTableData.length;j){let customTableDataJ this.customTableData[j]||{};//当表格数据id相同时 合并数据if(newTableData[i].id customTableDataJ.id){let obj {...newTableData[i],...customTableDataJ};newTableData[i] obj;}}for(let k0;kthis.userTableData.length;k){let userTableDataK this.userTableData[k]||{};//当表格数据id相同时 合并数据if(newTableData[i].id userTableDataK.id){let obj {...newTableData[i],...userTableDataK};newTableData[i] obj;}}}this.tableData newTableData;},5000);},}
}
/script二、多层级处理
templatediv classtestel-table :datatableData stripe stylewidth: 100%el-table-column propdate label日期 width180/el-table-columnel-table-column propname label姓名 width180/el-table-columnel-table-column propaddress label地址/el-table-columntemplateel-table-column v-foritem,index in addHeadColumn :propitem.keyMsg :labelitem.lable :keyindex/el-table-column/template /el-table/div
/templatescript
export default {name: HelloWorld,data () {return {tableData: [{id:1,date: 2016-05-02,name: 张三,address: 上海市普陀区金沙江路 1518 弄,msg:{age:16,gender:女,color:green,hobby:篮球}}, {id:2,date: 2016-05-04,name: 李四,address: 上海市普陀区金沙江路 1517 弄,msg:{age:27,gender:男,color:red,hobby:足球}}, {id:3,date: 2016-05-01,name: 王五,address: 上海市普陀区金沙江路 1519 弄,msg:{age:38,gender:男,color:blue,hobby:羽毛球}}, {id:4,date: 2016-05-03,name: 孙六,address: 上海市普陀区金沙江路 1516 弄,msg:{age:49,gender:男,color:orange,hobby:乒乓球}}],customTableData:[],userTableData:[],addHeadColumn:[],}},created(){this.getcustomTableData();},methods:{//获取自定义表头数据getcustomTableData(){this.addHeadColumn [];this.customTableData [];//模拟接口调用延时setTimeout((){let matchObj {age:年龄,gender:性别,color:幸运色,hobby:兴趣爱好}let differenceStr Msg;for(let i0;ithis.tableData.length;i){let msgObj (this.tableData[i]||{}).msg||{};for(let key in msgObj){let obj {key,lable:matchObj[key]}let index this.addHeadColumn.findIndex(item{return item.key obj.key});if(index0){this.addHeadColumn.push(obj)}//区分msg里字段与tableData[i]的字段有重复的加个string区分el-table-column的prop对应添加:propitem.keyMsgthis.tableData[i][keydifferenceStr] msgObj[key];}}},5000);},}
}
/script三、实际应用中为避免闪屏可以表格数据统一渲染
templatediv classtestel-table :datatableData stripe stylewidth: 100%!-- el-table-column propdate label日期 width180/el-table-columnel-table-column propname label姓名 width180/el-table-columnel-table-column propaddress label地址/el-table-column --templateel-table-column v-foritem,index in addHeadColumn :propindex2?item.keyMsg:item.key :labelitem.label :keyindex/el-table-column/template /el-table/div
/templatescript
export default {name: HelloWorld,data () {return {tableData: [],customTableData:[],userTableData:[],addHeadColumn:[],}},created(){this.getcustomTableData();},methods:{//获取自定义表头数据getcustomTableData(){this.addHeadColumn [];this.customTableData [];this.addHeadColumn [{key:date,label:日期},{key:name,label:姓名},{key:address,label:地址},{key:age,label:年龄},{key:gender,label:性别},{key:color,label:幸运色},{key:hobby,label:兴趣爱好}];let responseData [{id:1,date: 2016-05-02,name: 张三,address: 上海市普陀区金沙江路 1518 弄,msg:{age:16,gender:女,color:green,hobby:篮球}}, {id:2,date: 2016-05-04,name: 李四,address: 上海市普陀区金沙江路 1517 弄,msg:{age:27,gender:男,color:red,hobby:足球}}, {id:3,date: 2016-05-01,name: 王五,address: 上海市普陀区金沙江路 1519 弄,msg:{age:38,gender:男,color:blue,hobby:羽毛球}}, {id:4,date: 2016-05-03,name: 孙六,address: 上海市普陀区金沙江路 1516 弄,msg:{age:49,gender:男,color:orange,hobby:乒乓球}}];//模拟接口调用延时setTimeout((){let differenceStr Msg;for(let i0;iresponseData.length;i){let msgObj (responseData[i]||{}).msg||{};for(let key in msgObj){responseData[i][keydifferenceStr] msgObj[key];}}this.tableData responseData;},5000);},}
}
/script 总结
踩坑路漫漫长~
