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
);
},
浙公网安备 33010602011771号