el-table的列和行的合并
给table传入span-method方法可以实现合并行或列
返回 { row, column, rowIndex, columnIndex }
ps:
// rowIndex 行标识 对第几行 进行操作
// columnIndex 列标识 对第几列 进行操作
// rowspan: _row, // rowspan 单元格可横跨的行数 0跨到最后一行
// colspan: _col // colspan 单元格可横跨的列数 0跨到最后一列
<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%">
<el-table-column prop="id" label="ID"> </el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
<el-table-column prop="amount1" label="数值 1(元)"> </el-table-column>
<el-table-column prop="amount2" label="数值 2(元)"> </el-table-column>
<el-table-column prop="amount3" label="数值 3(元)"> </el-table-column>
</el-table>
data() {
return {
spanArr: [],//用于存放每一行记录的合并数
pos: '',
tableData: [
{
id: '12987123',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}
]
}
}
getData() {
this.getSpanArr(this.tableData)
},
getSpanArr(data) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].id === data[i - 1].id) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 行数据,列数据,行标识,列标识。
// rowIndex 行标识 对第几行 进行操作
// columnIndex 列标识 对第几列 进行操作
// columnIndex === 0 即对第一列操作
// rowIndex === 0 即对第一行操作
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row, //单元格可横跨的行数 0跨到最后一行
colspan: _col //单元格可横跨的列数 0跨到最后一列
}
}
},
rowspan: _row, //单元格可横跨的行数 0跨到最后一行
colspan: _col //单元格可横跨的列数 0跨到最后一列
直接写数字时
eg: _row = 1, _col = 1 不合并
_row = 1, _col = 8 每行合并前8列
合并后几列 需要配合 rowIndex columnIndex 进行合并
// rowIndex 行标识 对第几行 进行操作
// columnIndex 列标识 对第几列 进行操作
eg: 这是 每一行 合并第7列至最后一列(13列),并只有某个值等于1时才 合并后面的8列
if (columnIndex < 6) {
return {
rowspan: 1,
colspan: 1
}
} else {
if (row.delFlag == 1) {
return {
rowspan: 1,
colspan: 8
}
} else {
return {
rowspan: 1,
colspan: 1
}
}
}
每行合并列 后 只显示已合并中的第一列的值