vue element實現表格合并行數據

本文實例為大家分享了vue element實現表格合并行數據的具體代碼，供大家參考，具體內容如下

支持不分頁的表格數據，分頁的表格數據還有小bug

<template> <el-container> <el-main> <el-table :data='tableData' border :span-method='objectSpanMethod' //添加這個實現行數據合并 > <el-table-column label='序號' prop='id' align='center'></el-table-column> <el-table-column label='名字' prop='screenName' align='center'></el-table-column> <el-table-column label='時間1' prop='startTime' align='center'></el-table-column> <el-table-column label='時間2' prop='endTime' align='center'></el-table-column> </el-table> </el-main> </el-container></template><script>export default { name: 'Formtableyes', data() { return { //合并行 spanArr: [], //聲明一個數組 tableData: [ { id: 1, screenName: 'LHC', startTime: '12', endTime: '1231' }, { id: 1, screenName: 'LHC', startTime: '12', endTime: '123' } ] }; }, mounted: function() { this.tableDatas(); //加載數據就調用該方法 }, methods: { objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { //合并第一列 const _row = this.spanArr[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col }; } if (columnIndex === 1) { //合并第二列 const _row = this.spanArr[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col }; } // if (columnIndex === 2) { //合并第三列 // const _row = this.spanArr[rowIndex]; // const _col = _row > 0 ? 1 : 0; // return { // rowspan: _row, // colspan: _col // }; // } }, tableDatas() { let contactDot = 0; this.tableData.forEach((item, index) => { item.index = index; if (index === 0) { this.spanArr.push(1); } else { if (item.id === this.tableData[index - 1].id) { this.spanArr[contactDot] += 1; this.spanArr.push(0); } else { this.spanArr.push(1); contactDot = index; } } }); }, }};</script><style scoped>.ptselect { width: 100%;}</style>

效果如下：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。