【vue+el

【vue+el

效果

实现

<el-tableref="offroomTable"border:header-cell-style="{ 'text-align': 'center', background: '#b1defd', height: '34px' }":data="offroomTableList":highlight-current-row="true":height="screenHeight - 430":span-method="arraySpanMethod"><el-table-column label="xxx" :show-overflow-tooltip="true" align="center" prop="proCode" /><el-table-column label="xxx" :show-overflow-tooltip="true" align="center" prop="proName" /><el-table-column label="xxx" :show-overflow-tooltip="true" align="center" prop="ratifyYear" /><el-table-column label="说明" :show-overflow-tooltip="true" align="center" prop="conUnit" /></el-table>

   offroomTableList: [{ proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },{ proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },{ proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },{ proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },{ proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },{ proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },],

代码注解：
首先要判断是哪一列要进行合并，第一列要合并，所以列索引为0

const _row = SpanArr(this.offroomTableList).one[rowIndex]
然后要处理索引，用SpanArr方法处理原数组，.one[rowIndex]是处理后返回的是一个对象，里面是个数组 {one：[6,0,0,0,0,0,0]}
rowspan代表跨多少行合并
colspan代表跨多少列合并

arraySpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {      const _row = SpanArr(this.offroomTableList).one[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col,}}},

定义一个空数组和索引为0的字段
循环数组，索引为0 的时候往数组里push一个1，这段代码不用去改,把else里item.proCode改成你自己的字段就可以了

当走else里的代码时，如果当前行和上一行的proCode的值相同，数组第0项循环+1

这里要解释一下，拿效果图示例，第一列有6行，索引为0 的时候push了一个1,也就是第0项的值为1，=>[{0:1}]

索引为1，也就是第二行的时候，第二行的proCode和上一行的proCode相同，第0项再加1，并且push一个0，
这个时候的数组是这样的，=>[{0:2},{1:0}],按这样循环完之后，数组也就是这样了，=>[{0:6},{1:0}，{2：0}，{3：0}，{4：0}，{5：0}]
（为了方便大家理解，写成这样，第[index]项对应第[index]项的值，真正的数组是[6,0,0,0,0,0]）

如果当前项和上一项不一样，就push1，代表不被合并，独立占一行
最后讲这个数组返回，给它定义了一个名字one
希望解释的还算通俗，好理解，不清楚的可以随时问，欢迎

getSpanArr(arr) {if (arr) {const spanOneArr = []let concatOne = 0arr.forEach((item, index) => {if (index === 0) {spanOneArr.push(1)} else {        if (item.proCode === arr[index - 1].proCode) {// 第一列需合并相同内容的判断条件spanOneArr[concatOne] += 1spanOneArr.push(0)} else {spanOneArr.push(1)concatOne = index}}})return { one: spanOneArr }}},