vue el-table 合并单元格行的方法

在页面load的时候，对表格渲染的数据进行处理：(这里我穿了两个参数，一个是需要合并的数组，一个是表格行的字段属性。）可以理解成对数组进行标记。

 const getSpanArr = (data: any[], name: string) => {for (let i = 0; i < data?.length; i++) {if (i === 0) {spanArr.value.push(1);pos.value = 0;} else {if (data[i][name] === data[i - 1][name]) {spanArr.value[pos.value] += 1;spanArr.value.push(0);} else {spanArr.value.push(1);pos.value = i;}}}};

调用：(这里我传了两个参数，productTable是我表格绑定的数据，title是我要合并的行。）

const load = async () => {getSpanArr(productTable.value, "title");
};

对表格渲染的数据处理好后，开始计算每一行的每一列他需要占的行数，并记录下拉（我这里传了个参数，是表格的第几列需要合并，可以传一个数组）

const objectSpanMethod = ({ A }: any, columnIndexArray: number[]) => {if (columnIndexArray.includes(A.columnIndex)) {const _row = spanArr.value[A.rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}};

最后，在el-table中使用 :span-method="((A:any) => objectSpanMethod({ A }, [0, 5])) as any"

 <el-tableborder:data="cartTable":span-method="((A:any) => objectSpanMethod({ A }, [0, 5])) as any">

封装好的代码：：

import { ref } from "vue";export function spanTableRow() {const spanArr = ref<number[]>([]);const pos = ref();const getSpanArr = (data: any[], name: string) => {for (let i = 0; i < data?.length; i++) {if (i === 0) {spanArr.value.push(1);pos.value = 0;} else {if (data[i][name] === data[i - 1][name]) {spanArr.value[pos.value] += 1;spanArr.value.push(0);} else {spanArr.value.push(1);pos.value = i;}}}};const objectSpanMethod = ({ A }: any, columnIndexArray: number[]) => {if (columnIndexArray.includes(A.columnIndex)) {const _row = spanArr.value[A.rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}};return {getSpanArr,objectSpanMethod,};
}

vue el-table 合并单元格行的方法相关推荐

vue原生table合并单元格
vue原生table合并单元格 <table border="1"><thead><tr><th>学习</th>< ...
vue中用table_Vue中table合并单元格用法
地名结果人名性别 {{item.name}} 已完成未完成 {{item.groups[0].name}} {{item.groups[0].sex}} {{item.groups[son]. ...
Table合并单元格，表格居中，内容居中显示
例如:新建一张四行四列的表格,第一行的四列合并,第二.三.四行的第一列合并在一起居中显示 <%@ page language="java" contentType=" ...
vue el-table的合并单元格与拆分单元格
vue el-table的合并单元格与拆分单元格 methods: {objectSpanMethod({ row, column, rowIndex, columnIndex }) {const f ...
element plus的table合并单元格
element的table合并单元格就element+中的el-table中的span-method方法的使用和遇到的一些问题如果想要将后一列挨着的单元格合并,return 1,2,但是得将后一个 ...
js实现 table合并单元格
** table合并单元格 function uniteTdCells(tableId){var table = document.getElementById(tableId);for (let i ...
动态合并单元格行和列方法封装 ~~~起手可用
在项目中遇到一个需求合并单元格行跟列同时合并,抽个方法做个记录,可以直接引入min.js中直接使用 /*** * @param {*} table vue对象, Element-ui Table 插件 ...
JAVA EXCEL导出合并单元格自定义封装方法
转载在C站上面看到一个大神写的自定义封装方法转载地址:springboot 使用Poi 自定义封装方法合并excel中的单元格_Tongyao-CSDN博客_springboot合并单元格之前都 ...
table合并单元格_element ui el-table 合并单元格
element ui table 的合并单元格或者测试 vue 文件 <template><div><el-table:data="tableData&qu ...

vue el-table 合并单元格行的方法

vue el-table 合并单元格行的方法相关推荐

最新文章

热门文章