element 复杂的多级表头和数据处理
设计图
需求
根据推广渠道后端返回一个推广人员对应的一个或多个渠道信息;
后端返回数据结构
这里的volist是一个或多个;
解决思路
首先实现的效果用到element-ui的多级表头,即el-table-column 里面嵌套 el-table-column
这里合计、百度、搜狗。。。对应的数据参数是一定的。每个对应6个参数。
所以要先知道一个人对应的有几个渠道作为最外层遍历,内层是固定的6个参数的循环。最终拿到表格对应的数据。
1.data定义变量
//tableName里面的东西是固定的
tableName:[{name:'有效对话',key:'validSum'},
{name:'对话占比' ,key:'validPercent'},
{name:'获取手机',key:'getMobileSum'},
{name:'获取率',key:'getMobilePercent'},
{name:'资源成单',key:'placeOrderSum'},
{name:'成单率',key:'placeOrderPercent'}],
tableTitle:[]
2. 数据的处理
if (data && data.code === 0) {
let tableTit = data.data.resultList[0].voList;
let originAcount = data.data.resultList[0].voList.length;
for(let i=0;i
3.表头的使用
{{scope.row.voList[p][col.key]}}
-->