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.表头的使用

 
              
               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      -->
    
vue