Vue +Element-UI Table合并行

1.comm.js添加方法

 1 function getRowSpanObj(data, colNameArr) {
 2     var spanArr = {};
 3     var spanRowIndexArr = [];
 4     data.forEach(function (item, index) {
 5         if (index === 0) {
 6             for (var i = 0; i < colNameArr.length; i++) {
 7                 spanArr[colNameArr[i]] = [];
 8                 spanArr[colNameArr[i]].push(1);
 9                 spanRowIndexArr.push(0);
10             }
11         }
12         else {
13             for (var i = 0; i < colNameArr.length; i++) {
14                 // 判断当前元素与上一个元素是否相同
15                 var crrVal = eval("item." + colNameArr[i]);
16                 var lastVal = eval("data[index - 1]." + colNameArr[i]);
17                 if (crrVal === lastVal) {
18                     spanArr[colNameArr[i]][spanRowIndexArr[i]] += 1;
19                     spanArr[colNameArr[i]].push(0);
20                 } else {
21                     spanArr[colNameArr[i]].push(1);
22                     spanRowIndexArr[i] = index;
23                 }
24             }
25 
26         }
27     });
28     return spanArr;
29 }

getRowSpanObj

2.引用comm.js

3.页面对应模块的js修改：

data 中添加

//1.合并行参数
spanObj: null,
//2.要合并的列的字段名
spanCollArr: ['proviceName', 'cityName']

methods中添加：

            rowSpan: function (obj) {
                    var my = this;
                    if (my.spanCollArr.indexOf(obj.column.property) > -1) {
                        var _row = 0;
                        if (!!my.spanObj) {
                            _row = eval("my.spanObj." + obj.column.property + "[obj.rowIndex]");
                        }
                        const _col = _row > 0 ? 1 : 0;
                        return {
                            rowspan: _row,
                            colspan: _col
                        }
                    }
                },

rowSpan

4.页面修改

最终效果:

posted on 2018-07-13 17:59 #阿志# 阅读(122) 评论(0) 收藏举报