文章需求:动态实现table表格中行/列的自动合并
使用框架及UI类库:Vue+Element-ui
代码地址:https://github.com/dreamITGirl/VueProgect
最终实现的表格数据
实现思路:
在table组件中,提供了一个属性:span-method,它是一个Function,本身有4个参数,分别是row,rowIndex,colum,columIndex;这四个值可以直接拿到。先处理连续相同的列的值,做标记,然后,在合并的方法中,根据我们处理好的数组,去对应的合并行或列
实现代码:
//处理table数据的方法,将连续相同的数据汇总 merge() { let OrderObj = {}; let provinceObj = {}; this.tableData.forEach((element, index) => { element.rowIndex = index; if (OrderObj[element.operators]) {
//如果下一个数据中的operators和这一列的数据相同,则合并,反之,不合并;(增加这一个判断的目的是为了防止隔行出现相同时,列合并) let nextItem = this.tableData[index + 1].operators ? this.tableData[index + 1].operators : undefined; let prevItem = this.tableData[index - 1].operators ? this.tableData[index - 1].operators : undefined; if (element.operators == nextItem) { OrderObj[element.operators].push(index); } else if (element.operators == prevItem) { OrderObj[element.operators].push(index); } } else { OrderObj[element.operators] = []; OrderObj[element.operators].push(index); } if (provinceObj[element.province]) { let nextPro = this.tableData[index + 1] ? this.tableData[index + 1].province : undefined; let prevPro = this.tableData[index - 1].province ? this.tableData[index - 1].province : undefined; if (element.province == nextPro) { provinceObj[element.province].push(index); } else if (element.province == prevPro) { provinceObj[element.province].push(index); } } else { provinceObj[element.province] = []; provinceObj[element.province].push(index); } }); // 将数组长度大于1的值 存储到this.OrderIndexArr(也就是需要合并的项) for (let k in OrderObj) { if (OrderObj[k].length > 1) { this.OrderIndexArr.push(OrderObj[k]); } } for (let i in provinceObj) { if (provinceObj[i].length > 1) { this.provinceArr.push(provinceObj[i]); } }
}
//合并的方法 objectSpanMethod({ row, rowIndex, column, columnIndex }) { if (columnIndex === 0) { for (let i = 0; i < this.OrderIndexArr.length; i++) { let element = this.OrderIndexArr[i]; for (let j = 0; j < element.length; j++) { let item = element[j]; if (rowIndex === item) { if (j === 0) { return { rowspan: element.length, colspan: 1 }; } else if (j !== 0) { return { rowspan: 0, colspan: 0 }; } } } } }
//因为需求是前两列中有相同的就合并,所以需要再次判断出来第一列中哪些行需要合并; if (columnIndex === 1) { for (let j = 0; j < this.provinceArr.length; j++) { let element = this.provinceArr[j]; for (let k = 0; k < element.length; k++) { let item = element[k]; if (rowIndex === item) { if (k === 0) { return { rowspan: element.length, colspan: 1 }; } else if (k !== 0) { return { rowspan: 0, colspan: 0 }; } } } } } }
扫描二维码关注公众号,回复:
6838714 查看本文章
![](/qrcode.jpg)