【合并单元格】纵向合并单元格之前对数组处理【针对饿了么element的table的span-method合并行或列的计算方法】

<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合并行或列的计算方法】相关推荐

JAVA导出Excel通用工具类——第一篇：详细介绍POI 导出excel的多种复杂情况，包括动态设置筛选、动态合并横向（纵向）单元格等多种复杂情况——保姆级别，真的不能再详细了，代码拿来即用）
JAVA导出Excel通用工具--第一篇:详细介绍POI 导出excel的多种复杂情况,包括动态设置筛选.动态合并横向(纵向)单元格等多种复杂情况--保姆级别,真的不能再详细了,封装通用工具类,代码拿 ...
element的table组件，表头合并(合并表头单元格)
在el-table-column里面写两个el-table-column,然后用header-cell-style将子表头隐藏 <el-table:data="tableData&qu ...
Excel Vba 纵向合并相同内容的连续单元格
Private Sub MergeSelectonCellsVerticalByContent() Dim a%, b% Dim n As Long n = Selection.Rows.Count ...
asp单元格合并后宽度没有合并_ElementUI Table组件如何使用合并行或列功能深入解析...
需求,对指定的列表展示进行合并单元格,循环展示指定行和指定列. 1.官方文档通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列col ...
GRIDVIEW多行多列合并单元格（合并列）
GitHub项目地址:https://github.com/mingceng/merge-gridviewcell 去年的时候,我写了两篇文章: GridView多行多列合并单元格(完整代码和例子) ...
Laravel Excel实现Excel/CSV文件导入导出的功能详解（合并单元格，设置单元格样式）
Laravel Excel实现Excel/CSV文件导入导出(合并单元格,设置单元格样式) 这篇文章主要给大家介绍了关于在Laravel中如何使用Laravel Excel实现Excel/CSV文件导 ...
html 导出excel 列被合并,前端实现导出excel单元格合并和调整样式
有些业务场景需要导出excel表格,寻常这类需求其实是服务端完成,但是前端也有可以实现这类需求的库,这里我介绍最近使用过的三个库. 通用电子表格格式(CSF) 单元地址对象存储为{c:C, r:R}, ...
vue el-table的合并单元格与拆分单元格
vue el-table的合并单元格与拆分单元格 methods: {objectSpanMethod({ row, column, rowIndex, columnIndex }) {const f ...
java 合并和拆分单元格_如何在Microsoft Word中合并和拆分表和单元格
java 合并和拆分单元格 You can easily merge and split cells in Microsoft Word to make your tables more intere ...

【合并单元格】纵向合并单元格之前对数组处理【针对饿了么element的table的span-method合并行或列的计算方法】

【合并单元格】纵向合并单元格之前对数组处理【针对饿了么element的table的span-method合并行或列的计算方法】相关推荐

最新文章

热门文章