【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]
      }
     }
	}
}
  • 8
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
动态合并Element UI表格的单元格,可以使用表格的`span-method`属性。该属性接受一个方法作为参数,用于计算表格中每个单元格应该跨越多少或列。 下面是一个示例代码,演示了如何动态合并表格中的单元格: ```html <template> <el-table :data="tableData" :span-method="handleSpanMethod"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京' }, { name: '李四', age: 20, address: '上海' }, { name: '王五', age: 22, address: '广州' }, { name: '赵六', age: 24, address: '深圳' } ] } }, methods: { handleSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { // 如果是第一列,则判断该单元格是否和上一的单元格内容相同 if (rowIndex > 0 && row.name === this.tableData[rowIndex - 1].name) { // 如果相同,则返回一个对象,设置rowspan属性为0,表示该单元格不需要显示 return { rowspan: 0, colspan: 1 } } else { // 如果不同,则返回一个对象,设置rowspan属性为该单元格所在相同内容单元格的数量 let count = 1 for (let i = rowIndex + 1; i < this.tableData.length; i++) { if (row.name === this.tableData[i].name) { count++ } else { break } } return { rowspan: count, colspan: 1 } } } else { // 如果不是第一列,则返回一个对象,设置colspan属性为0,表示该单元格不需要显示 return { rowspan: 0, colspan: 0 } } } } } </script> ``` 在上述代码中,我们定义了一个`handleSpanMethod`方法,用于计算表格中每个单元格应该跨越多少或列。该方法接受一个参数,包含以下属性: - `row`:当前单元格所在的数据对象 - `column`:当前单元格所在列的配置对象 - `rowIndex`:当前单元格所在的索引 - `columnIndex`:当前单元格所在列的索引 在`handleSpanMethod`方法中,我们首先判断当前单元格是否为第一列,如果是第一列则需要动态合并单元格。我们使用条件语句判断该单元格是否和上一的单元格内容相同,如果相同则返回一个对象,设置`rowspan`属性为0,表示该单元格不需要显示;如果不同则返回一个对象,设置`rowspan`属性为该单元格所在相同内容单元格的数量。如果当前单元格不是第一列,则返回一个对象,设置`colspan`属性为0,表示该单元格不需要显示。 最后,在表格中使用`span-method`属性,绑定`handleSpanMethod`方法即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值