问题形容
有时候,产品让咱们做的表格,会有合并列的性能,然而官网的 demo 略有不清晰,本文举个例子简述之。咱们先看下效果图:
假如产品的需要是这样的: 设施类别那一列,同类的,做成分堆模式,也就是合并列模式
剖析
剖析写在代码正文中外面哦
代码附上
<template>
<div class="vueWrap">
<el-table
:span-method="objectSpanMethod"
style="width: 800px"
:data="tableBody"
border
:header-cell-style="{
background: '#FAFAFA',
color: '#333333',
fontWeight: 'bold',
fontSize: '14px',
}"
>
<el-table-column
type="index"
label="序号"
width="58"
align="center"
></el-table-column>
<el-table-column
prop="toolsKinds"
label="设施类别"
align="center"
></el-table-column>
<el-table-column prop="toolsName" label="设施名称" align="center"></el-table-column>
<el-table-column prop="price" label="价格(元)" align="center"></el-table-column>
<el-table-column prop="remark" label="备注" align="center"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {data() {
return {
// 表体数据
tableBody: [
{
toolsKinds: "螺丝刀",
toolsName: "一号螺丝刀",
price: 10,
remark: "",
},
{
toolsKinds: "螺丝刀",
toolsName: "二号螺丝刀",
price: 20,
remark: "",
},
{
toolsKinds: "螺丝刀",
toolsName: "三号螺丝刀",
price: 30,
remark: "",
},
{
toolsKinds: "扳手",
toolsName: "大号扳手",
price: 88,
remark: "",
},
{
toolsKinds: "扳手",
toolsName: "中号扳手",
price: 44,
remark: "",
},
{
toolsKinds: "老虎钳子",
toolsName: "火星专供老虎钳",
price: 999,
remark: "",
},
{
toolsKinds: "老虎钳子",
toolsName: "土星专供老虎钳",
price: 1001,
remark: "",
},
],
cellList: [], // 单元格数组
count: null, // 计数
};
},
mounted() {
// 第 1 步,依据表体信息,计算合并单元格的信息
this.computeCell(this.tableBody);
},
methods: {computeCell(tableBody) {
// 循环遍历表体数据
for (let i = 0; i < tableBody.length; i++) {if (i == 0) {
// 先设置第一项
this.cellList.push(1); // 初为 1,若下一项和此项雷同,就往 cellList 数组中追加 0
this.count = 0; // 初始计数为 0
console.log("索引", 0, this.count);
} else {
// 判断以后项与上项的设施类别是否雷同,因为是合并这一列的单元格
if (tableBody[i].toolsKinds == tableBody[i - 1].toolsKinds) {
// 如果相等
this.cellList[this.count] += 1; // 减少计数
this.cellList.push(0); // 相等就往 cellList 数组中追加 0
console.log("索引", i, this.count);
} else {this.cellList.push(1); // 不等就往 cellList 数组中追加 1
this.count = i; // 将索引赋值为计数
console.log("索引", i, this.count);
}
}
}
},
// 第 2 步,将计算好的后果返回给 el-table,这样的话表格就会依据这个后果做对应合并列渲染
objectSpanMethod({row, column, rowIndex, columnIndex}) {
// 给第二列做单元格合并。0 是第一列,1 是第二列。if (columnIndex === 1) {console.log("单元格数组,若下一项为 0,则代表合并上一项", this.cellList);
const rowCell = this.cellList[rowIndex];
if (rowCell > 0) {
const colCell = 1;
console.log(` 动静竖向合并单元格, 第 ${colCell} 列,竖向合并 ${rowCell} 个单元格 `);
return {
rowspan: rowCell,
colspan: colCell,
};
} else {
// 革除原有的单元格,必须要加,否则就会呈现单元格会被横着挤到前面了!!!// 本例中数据是写死的不会呈现,数据若是动静后端获取的,就会呈现了!!!return {
rowspan: 0,
colspan: 0,
};
}
}
},
},
};
</script>
打印截图
留神打印的后果
演示的话,间接复制粘贴即可