效果图
树形展开按钮放到第二列,设置第一列type为空即可
代码如下:
<el-table-column prop="SORT_" align="center" label="测试" type=""></el-table-column>
数据格式如下
<el-table
:data="tableData"
:span-method="objectSpanMethod"
row-key="SORT_ID"
@expand-change="expandChange"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
border
style="width: 100%">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
sortable
label="数值 1">
</el-table-column>
<el-table-column
prop="amount2"
sortable
label="数值 2">
</el-table-column>
<el-table-column
prop="amount3"
sortable
label="数值 3">
</el-table-column>
</el-table>
/**
* 处理表格数据合并行
*/
dealTableData() {
//把日期相同的数据并排在一块
const list = this.margePropData(this.tableData, 'SORT_')
//处理日期相同的合并
this.tableData = this.mergeRows(list, 'SORT_')
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if ([0].includes(columnIndex) && row.SORT_ != 99) {
return {
rowspan: row.rowspan,
colspan: 1
};
}
if (row.SORT_ == 99) {
if (columnIndex === 0) {
return [0, 0]
} else if (columnIndex === 1) {
return [1, 2]
}
}
},
margePropData(list = [], prop) {
let arr = [], tempArr = {};
list.forEach(item => {
if (!tempArr[item[prop]]) {
tempArr[item[prop]] = [item]
} else {
tempArr[item[prop]].push(item)
}
})
for (const tempArrKey in tempArr) {
arr = [...arr, ...tempArr[tempArrKey]]
}
return arr
},
mergeRows(list = [], prop) {
list.forEach(ele => {
ele.rowspan = 1
})
const len = list.length
for (let i = 0; i < len; i++) {
for (let j = i + 1; j < len; j++) {
if (list[i][prop] === list[j][prop]) {
list[i].rowspan++
list[j].rowspan--
}
}
// 这里跳过已经重复的数据
i = i + list[i].rowspan - 1
}
return list
},
// 点击树形展开按钮的回调事件,重新改变表格数据,自动计算合并行
expandChange(row, expanded) {
var index = 0
if (row.SORT_ == 1) {
index = 0
}
if (row.SORT_ == 2) {
index = 4
}
if (row.SORT_ == 3) {
index = 8
}
// 拿到当前行的children的length,增加或者减少当前合并行的数目即可
if (expanded) {
this.oldrowspan = this.tableData[index].rowspan
this.$set(this.tableData[index], 'rowspan', this.tableData[index].rowspan + row.children.length)
} else {
this.$set(this.tableData[index], 'rowspan', this.tableData[index].rowspan - row.children.length)
}
},
因篇幅问题不能全部显示,请点此查看更多更全内容