?

?

<template><el-table :span-method="spanMethod"><el-table-column label="組號" show-overflow-tooltip><template slot-scope="scope"><span>{{ scope.row.group_number }}</span></template></el-table-column><el-table-column label="公司名稱" show-overflow-tooltip><template slot-scope="scope"><span>{{ scope.row.corporate_name }}</span></template></el-table-column></el-table>
</template>
<script>
export default {data() {return {items: [需要合并單元格的元數據數組],//合并單元格用的字段（字段名和列名）spanFields: [{ fieldName: "group_number", label: "組號" },{ fieldName: "corporate_name", label: "公司名稱" }]};},created() {this.getSpanItems();},methods: {//【核心代碼1】縱向合并單元格之前對數組處理【針對餓了么element的table的span-method合并行或列的計算方法】getSpanItems() {for (var j = 0, lenj = this.spanFields.length; j < lenj; j++) {var fieldName = this.spanFields[j].fieldName;var fieldLabel = this.spanFields[j].label;var arr = this.items,startItem = arr[0],rowSpan = 0;for (var i = 0, len = arr.length; i < len; i++) {var item = arr[i];item.rowSpan || (item.rowSpan = {});startItem[fieldName] !== item[fieldName] &&((rowSpan = 0), (startItem = item));startItem.rowSpan[fieldLabel] = ++rowSpan;}}},//【核心代碼2】合并單元格（這里只介紹縱向合并方法）spanMethod({ row, column, rowIndex, columnIndex }) {for (var i = 0, len = this.spanFields.length; i < len; i++) {var fieldLabel = this.spanFields[i].label;if (fieldLabel === column.label) {return [row.rowSpan[fieldLabel] || 0, 1];}}}}
};
</script>

總結

以上是生活随笔為你收集整理的【合并单元格】纵向合并单元格之前对数组处理【针对饿了么element的table的span-method合并行或列的计算方法】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。