中国网站建设代理项目,优化手机网站,好看logo图片,北京网站开发企业前言#xff1a; 开发中会经常使用到表格例如el-table#xff0c;还会经常用到合并行或合并列#xff0c;el-table提供了对应的方法#xff0c;但是官方文档中的方法是固定的行数或列数#xff0c;如果我们想要根据接口获取到的动态数据去合并行或合并列应该怎么实现呢 开发中会经常使用到表格例如el-table还会经常用到合并行或合并列el-table提供了对应的方法但是官方文档中的方法是固定的行数或列数如果我们想要根据接口获取到的动态数据去合并行或合并列应该怎么实现呢可以自己去封装一个方法。 代码如下
/**
1.首先在工具文件中定义一个合并行的方法rowMethod
2.然后在el-table需要合并的地方去调用rowMethod方法
**/
// 1.util--index.js
// 合并行
export function rowMethod(columnArr, tableData) {// columnArr 合并行所在的列字段// tableData需要合并的动态表格数据let column {}let position 0// 遍历合并的列数据columnArr.forEach((prop) {column[prop] []// 遍历合并的行数据tableData.forEach((row, rowIndex) {// 第N列第一行column[prop][rowIndex] [1, 1]if (rowIndex 0) {// 记录当前行号position 0} else if (row[prop] tableData[rowIndex - 1][prop]) {// 当前行数据等于上一行根据记录的行号计算需要合并几行。column[prop][position][0] 1// 当前行 隐藏不显示column[prop][rowIndex][0] 0} else {// 不相等之后重置记录行号position rowIndex}})})return column
}
//2.在table.vue页面中引入并使用
import {rowMethod} from ../util/index.js
template
el-table stripe border :datatableData :span-methodobjectSpanMethodel-table-column/el-table-column
/el-table
/templateexport dafault {method: {objectSpanMethod({ row, column, rowIndex, columnIndex }) {let newRow colMethod([列名], 表格数据)let newArray newRow[column.property] || []if (column.type index newRow([列名])) {return newRow[列名][rowIndex]} else if (newArray.length) {return newArray[rowIndex]} else {return [1, 1]}}}
}
