【vue+el-table】合并列,span-method方法实现,合并相同列名或相同id
效果实现<el-tableref="offroomTable"border:header-cell-style="{ 'text-align': 'center', background: '#b1defd', height: '34px' }":data="offroomTableList":highlight-current
效果
实现
<el-table
ref="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 = this.getSpanArr(this.offroomTableList).one[rowIndex]
然后要处理索引,用this.getSpanArr方法处理原数组,.one[rowIndex]是处理后返回的是一个对象,里面是个数组 {one:[6,0,0,0,0,0,0]}
rowspan代表跨多少行合并
colspan代表跨多少列合并
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.getSpanArr(this.offroomTableList).one[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
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 = 0
arr.forEach((item, index) => {
if (index === 0) {
spanOneArr.push(1)
} else {
if (item.proCode === arr[index - 1].proCode) {
// 第一列需合并相同内容的判断条件
spanOneArr[concatOne] += 1
spanOneArr.push(0)
} else {
spanOneArr.push(1)
concatOne = index
}
}
})
return { one: spanOneArr }
}
},
更多推荐
所有评论(0)