Vue+Element UI el-table合并表格相同值行合并
Vue+Element UI el-table合并表格相同值行合并代码实现代码实现<el-table:data="tableData":span-method="objectSpanMethod"borderstyle="width: 100%; margin-top: 0"><el-table-columnprop="id"label="ID"width="100px">
·
Vue+Element UI el-table合并表格相同值行合并
代码实现
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 0">
<el-table-column
prop="id"
label="ID"
width="100px">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
</el-table>
data() {
return {
tableData: [{
id: '12987122',
name: '王小虎',
}, {
id: '12987123',
name: '王小虎',
},{
id: '12987123',
name: '王小虎2',
}, {
id: '12987124',
name: '王小虎',
}, {
id: '12987125',
name: '王小虎',
}, {
id: '12987126',
name: '王小虎',
}]
}
},
mounted() {
let data2 = this.mergeTableRow(this.tableData,['id']);
this.tableData = data2;
},
methods: {
objectSpanMethod({row, column, rowIndex, columnIndex}) {
const span = column['property'] + '-span';
if(row[span]){
return row[span]
}
},
/**
*
* @param data 表格数据
* @param merge 需要合并的列字段名称数组
* @returns {*}
*/
mergeTableRow (data, merge) {
if (!merge || merge.length === 0) {
return data
}
merge.forEach((m) => {
const mList = {}
data = data.map((v, index) => {
const rowVal = v[m]
if (mList[rowVal] && mList[rowVal].newIndex === index) {
mList[rowVal]['num']++
mList[rowVal]['newIndex']++
data[mList[rowVal]['index']][m + '-span'].rowspan++
v[m + '-span'] = {
rowspan: 0,
colspan: 0
}
} else {
mList[rowVal] = { num: 1, index: index, newIndex: index + 1 }
v[m + '-span'] = {
rowspan: 1,
colspan: 1
}
}
return v
})
});
return data
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)