Vue+elementUI实现动态展示列表的数据_vue.js_

Vue elementUI动态展示列表的数据

需求描述

活动查看的时候，根据后台返回的数据，动态渲染列和每行数据。

后台返回的数据结构如下

html

导出数据

data定义需要用到的字段

 activitySettingPopUp: false, //活动设置弹窗 activityData: [], //查看活动数据 // answer: [], // tableAnswer: [], resultTable: [], //查看数据处理后的数据 result: [], //查看数据用于循环的数据 activityName: "", //查看数据的活动名称

调接口，成功后，将data.answers的值赋值给activityData.

 if (res.status_code === 200) { console.log(res); this.activityName = res.data.active_name; this.activityData = res.data.answers; this.result = this.getCol(this.activityData); this.resultTable = this.getTable(this.activityData); }

getCol方法获取需要循环的列label和值prop

 getCol(src) { let col = []; // for (let i = 0; i < src.length; i++) { for (let j in src[0]) { if (j === "answer") { let str = src[0][j]; let str2obj = JSON.parse(str); for (let k in str2obj) { col.push({ prop: k, label: str2obj[k]["title"], }); } } else { col.push({ prop: j, label: src[0][j].title, }); } } // } return col; }, 

获取表格的数据

 getTable(src) { let table = []; for (let i = 0; i < src.length; i++) { let temp = {}; for (let j in src[i]) { if (j == "answer") { let obj = JSON.parse(src[i][j]); for (let k in obj) { temp[k] = obj[k].value; } } else { temp[j] = src[i][j].value; } } table.push(temp); } return table; },

Vue elementUI注意事项

多选框对应List