需要把指定列的相同且相邻的数据合并起来
在获取tabledata的接口调用getSpanArr方法,此方法通过遍历把需要合并的字段id判断,相同的就给spanArr数组加一,在表格渲染时调用objectSpanMethod方法
需要新增一个数组spanArr接受判断的数据
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px">
<el-table-column
prop="id"
label="项目名称"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="项目分期">
</el-table-column>
<el-table-column
prop="amount1"
label="地块名称">
</el-table-column>
<el-table-column
prop="amount2"
label="项目状态">
</el-table-column>
<el-table-column
prop="amount3"
label="所属区域">
</el-table-column>
<el-table-column
prop="amount3"
label="项目所在地">
</el-table-column>
<el-table-column
prop="amount3"
label="项目类型">
</el-table-column>
</el-table>
getTableData(){
this.tableData={.....};//此处是接口获取的表格数据
this.tableTotal=this.tableData.length;
this.getSpanArr(this.tableData);
},
getSpanArr: function (data) {
var vm = this;
vm.spanArr = [];
vm.pos = 0;
data.forEach(function (item, index) {
//判断是否是第一项
if (index === 0) {
vm.spanArr.push(1);
vm.pos = 0;
} else {
//不是第一项时,就根据标识去存储
if (data[index].id === data[index - 1].id) {
// 查找到符合条件的数据时每次要把之前存储的数据+1
vm.spanArr[vm.pos] += 1;
vm.spanArr.push(0);
} else {
// 没有符合的数据时,要记住当前的index
vm.spanArr.push(1);
vm.pos = index;
}
}
});
},
objectSpanMethod: function (obj) {
if (obj.columnIndex === 0) {
// 二维数组存储的数据 取出
var _row = this.spanArr[obj.rowIndex];
var _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
} else {
return false;
}
},