Vue+ElementUI表格合并单元格
很多小伙伴会遇到展示的表格中需要合并单元格的需求,官网的api写的也不够咱们用,最近正好也遇到了一个,写出来供大家分享AWA~(本次分享为行合并,列合并同理,花心思想一想吧,很好改的哦)
其实合并单元格很简单,但是第一次写着实有点摸不着头脑,接下来就带大家写一个Demo,写出来之后就发现原来还是挺好理解的啦~
(PS:ElementUI的大版本2以下是不支持合并单元格的哦,老弟在这被坑了好久)
绑定合并方法
首先我们需要有一个表格
表格是官网的,但合并单元格不是哦~
:span-method=“arraySpanMethod” 绑定合并单元格返回的数组
<template>
<el-table
:data="tableData"
:span-method="arraySpanMethod"
stripe
style="width: 100%">
<el-table-column
label="序号"
type="index"
width="70">
</el-table-column>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
//合并单元格数组
spanArr: [],
//貌似是个中间变量,我也不知道是个什么玩儿意QAQ
pos: 0,
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小狼',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小狼',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
接下来就是重点:
拼接合并逻辑数组的方法
第一个方法是获取合并单元格的数组,其中需要改动的地方就是绿色部分date他指的是你根据哪一个字段去匹配合并的逻辑,由代码不难看出,当本行的数据的该字段与上一行相同时,对合并数组进行构建,进而实现整个合并数组的形成。
第二个方法就是api中提供的对行或列合并单元格的绑定,这里需要修改的地方就是columnIndex <= 1的1,他代表了我们将那几列按照之前拼好的逻辑数组去合并(这里小于等于1就是前两列进行合并)
getSpanArr(data) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1)
this.pos = 0
} else { // 判断当前元素与上一个元素是否相同
if (data[i]['date'] === data[i - 1]['date']) {
this.spanArr[this.pos] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
this.pos = i
}
}
}
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex <= 1) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},
这时,我们只差最后一步了!就是
调用方法进行合并逻辑数组的拼接
最后,我们在ajax调用成功获取返回值时,调用第一个方法,传入data,进行合并逻辑数组的拼接,
我这里就简单写一个JQ的ajax返回成功调用的方法进行演示
success: function (data) {
//调用方法进行合并逻辑数组的拼接
that.getSpanArr(data);
//将返回值赋给表格数据
that.tableData = data;
},
当当当当,接下来就OK啦
萌新第一次写博客,技术或者文章有什么不足之处欢迎各位大佬指正,又不明白的小伙伴也欢迎大家一起研究~