vue
<div id="app"> <template> <div> <el-table :data="tableData6" :span-method="objectSpanMethod" border style=" 100%; margin-top: 20px"> <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" 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> </div> </template> </div>
javascript
function getRowIndex(objArr, index) { return objArr[index]._rs === 0 ? getRowIndex(objArr, index - 1) : index; } const spanMethod = function(name) { // name 需要做相邻合并的属性名称 var a = []; // 做一个二维数组 return function objectSpanMethod({ row, column, rowIndex, columnIndex }) { console.log({ row, column, rowIndex, columnIndex, a }) // 合并第nameClunmnIndex列 if (column.property === name) { let aI = a[columnIndex] && a[columnIndex][rowIndex]; console.log(1) if (!aI) { // 未判断过的进行相关处理 if(!a[columnIndex]) { a[columnIndex] = []; } console.log(2) aI = { _rs: 1, _cs: 1, [name]: row[name], }; console.log(3) a[columnIndex][rowIndex] = aI; console.log(4) if (rowIndex && a[columnIndex][rowIndex - 1][name] === row[name]) { // 如果不是第一个参数 且上一个参数和这一个参数相同 console.log(5) // 隐藏这个参数 aI._rs = 0; aI._cs = 0; a[columnIndex][ getRowIndex(a[columnIndex], rowIndex - 1) ]._rs += 1; } } return [aI._rs, aI._cs] } }; } var Main = { data() { return { tableData6: [{ id: '12987122', name: '王小虎', amount1: '234', amount2: '3.2', amount3: 10 }, { id: '12987123', name: '王小虎', amount1: '165', amount2: '4.43', amount3: 12 }, { id: '12987125', name: '王小虎', amount1: '324', amount2: '1.9', amount3: 9 }, { id: '12987125', name: '王小虎', amount1: '621', amount2: '2.2', amount3: 17 }, { id: '12987128', name: '王小虎', amount1: '539', amount2: '4.1', amount3: 15 }] }; }, methods: { objectSpanMethod: spanMethod('id'), } }; var Ctor = Vue.extend(Main) new Ctor().$mount('#app')