在 table 组件中，提供了一个属性:span-method,它是一个Function，本身有4个参数，分别是 row , rowIndex , column , columIndex; 这四个值可以直接拿到。先处理连续相同的列的值，做标记，然后，在合并的方法中，根据我们处理好的数组，去对应的合并行或列。
我要评论<template>
<div>
<el-table
ref="multipleTable"
border
:span-method="objectSpanMethod"
:data="tableData"
style="width: 80%;margin:0 auto;"
>
<el-table-column label="商品类别" prop="productType" align="center" width="200"></el-table-column>
<el-table-column label="商品数量" prop="amount" align="center"></el-table-column>
<el-table-column label="商品价格" prop="price" align="center"></el-table-column>
<el-table-column label="商品名称" prop="productName" width="200px" align="center"></el-table-column>
<el-table-column label="操作人员" prop="operator" align="center"></el-table-column>
<el-table-column label="更新时间" prop="updateTime" align="center"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: "201808300001",
productType: "纺织品",
amount: 20,
productName: "上衣",
price: "80.00",
updateTime: "2018-08-30",
operator: "小吴"
},
{
id: "201808300002",
productType: "纺织品",
amount: 20,
productName: "裤子",
price: "76.00",
updateTime: "2018-08-31",
operator: "小张"
},
{
id: "201808300003",
productType: "饮料",
amount: 100,
productName: "肥宅快乐水",
price: "5.00",
updateTime: "2018-08-31",
operator: "小吴"
},
{
id: "201808300004",
productType: "皮制品",
amount: 100,
productName: "鞋子",
price: "76.00",
updateTime: "2018-08-29",
operator: "小王"
},
{
id: "201808300005",
productType: "绸缎",
amount: 80,
productName: "旗袍",
price: "106.00",
updateTime: "2018-08-31",
operator: "小吴"
},
{
id: "201808300006",
productType: "纺织品",
amount: 20,
productName: "短裙",
price: "36.00",
updateTime: "2018-08-30",
operator: "小吴"
},
{
id: "201808300007",
productType: "纺织品",
amount: 90,
productName: "短袖",
price: "36.00",
updateTime: "2018-08-30",
operator: "小张"
}
],
rowIndex: "-1",
OrderIndexArr: [],
amountArr: []
};
},
methods: {
// 获取相同编号的数组
getOrderNumber() {
let OrderObj = {};
let amountObj = {};
this.tableData.forEach((element, index) => {
element.rowIndex = index;
// console.log(element.productType,OrderObj[element.productType])
if (OrderObj[element.productType]) {
let nextItem = this.tableData[index].productType
? this.tableData[index].productType
: undefined;
let prevItem = this.tableData[index - 1].productType
? this.tableData[index - 1].productType
: undefined;
if (element.productType == nextItem) {
OrderObj[element.productType].push(index);
} else if (element.productType == prevItem) {
OrderObj[element.productType].push(index);
}
} else {
OrderObj[element.productType] = [];
OrderObj[element.productType].push(index);
}
if (amountObj[element.amount]) {
let nextPro = this.tableData[index].amount
? this.tableData[index].amount
: undefined;
let prevPro = this.tableData[index - 1].amount
? this.tableData[index - 1].amount
: undefined;
if (element.amount == nextPro) {
amountObj[element.amount].push(index);
} else if (element.amount == prevPro) {
amountObj[element.amount].push(index);
}
} else {
amountObj[element.amount] = [];
amountObj[element.amount].push(index);
}
});
// 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
for (let k in OrderObj) {
if (OrderObj[k].length > 1) {
this.handleData1(OrderObj[k]);
}
}
for (let i in amountObj) {
if (amountObj[i].length > 1) {
this.handleData2(amountObj[i]);
}
}
},
// 合并单元格
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
if (columnIndex === 0) {
for (let i = 0; i < this.OrderIndexArr.length; i++) {
let element = this.OrderIndexArr[i];
for (let j = 0; j < element.length; j++) {
let item = element[j];
if (rowIndex == item) {
if (j == 0) {
return {
rowspan: element.length,
colspan: 1
};
} else if (j != 0) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
}
//因为需求是前两列中有相同的就合并，所以需要再次判断出来第二列中哪些行需要合并；
if (columnIndex === 1) {
for (let j = 0; j < this.amountArr.length; j++) {
let element = this.amountArr[j];
for (let k = 0; k < element.length; k++) {
let item = element[k];
if (rowIndex === item) {
if (k === 0) {
return {
rowspan: element.length,
colspan: 1
};
} else if (k !== 0) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
}
},
// 处理当数组的长度大于2的时候
handleData1(data) {
let temp = data;
let itemArr = [];
let itemArrNew = [];
let resArr = [];
if (data.length > 2) {
for (let i = 0; i < data.length; i++) {
if (data[i + 1]) {
if (data[i + 1] - data[i] > 1) {
itemArr = data.slice(0, i + 1);
itemArrNew = temp.slice(i + 1, temp.length);
break;
} else {
resArr = data;
}
}
}
if (itemArr.length > 0 || itemArrNew.length > 0) {
this.OrderIndexArr.push(itemArr);
this.OrderIndexArr.push(itemArrNew);
} else {
this.OrderIndexArr.push(data);
}
} else {
this.OrderIndexArr.push(data);
}
},
// 处理当数组的长度大于2的时候
handleData2(data) {
let temp = data;
let itemArr = [];
let itemArrNew = [];
let resArr = [];
if (data.length > 2) {
for (let i = 0; i < data.length; i++) {
if (data[i + 1]) {
if (data[i + 1] - data[i] > 1) {
itemArr = data.slice(0, i + 1);
itemArrNew = temp.slice(i + 1, temp.length);
break;
} else {
resArr = data;
}
}
}
if (itemArr.length > 0 || itemArrNew.length > 0) {
this.amountArr.push(itemArr);
this.amountArr.push(itemArrNew);
} else {
this.amountArr.push(data);
}
} else {
this.amountArr.push(data);
}
}
},
beforeMount() {
this.getOrderNumber();
}
};
</script>
当然也有小bug，当你鼠标移动到上面时hover不准确，当然肯定是有办法滴
cell-mouse-enter cell-mouse-leave cell-class-name
这三个官方提供的方法可以有效修改，但我还是没搞太懂，就不献丑了，大家可以先行研究。
本文地址：https://blog.csdn.net/ZYS10000/article/details/107361180
如对本文有疑问， 点击进行留言回复！！
生成模型——NVAE: A Deep Hierarchical Variational Autoencoder——arxiv2020.07
Element-ui 表格 (Table) 组件中动态合并单元格
网友评论