【Vue】动态合并行

服务器托管网

前言：
开发中会经常使用到表格例如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 :data="tableData" :span-method="objectSpanMethod">
   el-table-column>/el-table-column>
/el-table>
/template>

export 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]
      }
     }
	}
}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 【深度学习】因果推断与机器学习的高级实践 | 数学建模

文章目录 因果推断 因果推断的前世今生 （1）潜在结果框架（Potential Outcome Framework） （2）结构因果模型（Structual Causal Model，SCM） 身处人工智能爆发式增长时代的机器学习从业者无疑是幸运的，人工智能如…