1、返回数据为一维数组
getData() { that.tableData = res.data.data.list; }
2、合并函数
挂在vue底层: Vue.prototype.$spanMethodFunc=function(list, props, row, col) 写在method内: spanMethodFunc(list, props, row, col) { if (col >= props.length || !props[col]) { // console.log(123) // 根据传入的字段列表,判断不需要合并的列 return [1, 1]; } else { //使用try-catch,如果方法错误返回错误信息 try { let _props = props.slice(0, col + 1); //截取需要用到判断的字段名 // 判断是否从本行开始合并 let merge = _props.some(item => { // console.log(list[row]) // 如果当前行所需要判断合并的字段中有一个跟前一条数据不一样,本条数据即为合并的起点,第一条数据直接为合并起点 return row == 0 || (item && list[row][item] != list[row - 1][item]); }); // 如果本条数据是合并起点,获取需要合并的数据条数 // console.log(merge) if (merge) { let _list = list.slice(row); //截取从本条数据开始的列表 // 获取合并行数 let _lineNum = _list.findIndex((item, ind) => { //同merge判断,找到合并的终点 return ( ind && _props.some(item1 => { return item1 && item[item1] != _list[0][item1]; }) ); }); // 合并行数为-1时,输出_list的长度,否则输出_lineNum return [_lineNum === -1 ? _list.length : _lineNum, 1]; } else { // 否则,返回[0,0],即本条数据被合并 return [0, 0]; } } catch (err) { // 打印报错 console.error("spanMethodFunc error:", err); } } },
3、调用合并
objectSpanMethod({ row, column, rowIndex, columnIndex }) { let propSpan = [ "id", "company", "contractId" ];
//例如:[“id”,“”“contractId”] return this.spanMethodFunc( this.tableData, propSpan, rowIndex, columnIndex ); },