封装方法实现表格合并

最新推荐文章于 2024-08-27 09:08:32 发布

前端小趴菜05

最新推荐文章于 2024-08-27 09:08:32 发布

阅读量148

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_68716504/article/details/140182018

版权

封装方法

const mergeTableRow = (config:any)=> {
    let data = config.data
    const {
      mergeColNames, // 需要合并的列
      firstMergeColNames, // 受影响的列
      firstMerge // 以哪列为基础进行合并(基准列)
    } = config
    if (!mergeColNames || mergeColNames.length === 0) {
      return data
    }
    mergeColNames.forEach((m:any) => {
      const mList:any = {}
      data = data.map((v:any, index:any) => {
        // 区分需要合并行的key值
        const rowVal = v[firstMerge] + '-' + v[m]
        // 需要合并行的第二行以及之后行会走if
        // m === firstMerge 判断需要合并的列是否是基准列，如果是则只满足前面的条件，如果不是则需满足前面+后面的条件
        if (mList[rowVal] && mList[rowVal].newIndex === index && (m === firstMerge ? true : data[index][firstMerge + '-span'].rowspan === 0)) {
          // 判断受影响的列是否是需要合并的列
          const flag = firstMergeColNames.filter((f:any) => {
            return f === m
          }).length !== 0
          // 判断需要合并的列是否是基准列
          const mcFlag = mergeColNames.filter((mc:any) => {
            return mc === firstMerge
          }).length === 0
          // 判断基准列只有一行的时候，直接赋值rowspan和colspan为1
          if ((mcFlag && flag) || (flag && data[index][firstMerge + '-span'] && data[index][firstMerge + '-span'].rowspan === 1)) {
            v[m + '-span'] = {
              rowspan: 1,
              colspan: 1
            }
          } else {
            // 判断基准列或其他需要合并列有多行时，第一行rowspan++
            data[mList[rowVal]['index']][m + '-span'].rowspan++
            // 需要合并行除了第一行之后其他行设置rowspan和colspan为0
            v[m + '-span'] = {
              rowspan: 0,
              colspan: 0
            }
            mList[rowVal]['num']++
            mList[rowVal]['newIndex']++
          }
        } else { // 需要合并列第一行走else
          mList[rowVal] = {
            num: 1,
            index: index,
            newIndex: index + 1
          }
          v[m + '-span'] = {
            rowspan: 1,
            colspan: 1
          }
        }
        return v
      })
    })
    return data
  }
  const objectSpanMethod = ({ row, column, rowIndex, columnIndex }:any)=> {
    const span = column['property'] + '-span'
    if(row[span]){
      return row[span]
    }
    
  }
  export { 
    mergeTableRow,
    objectSpanMethod 
}

页面使用


<script setup lang="ts">
import {mergeTableRow,objectSpanMethod} from '../../hook/mergeTableRow.ts'  //引入封装的方法
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const tableData1 =  ref(mergeTableRow({  //处理数据
            data: tableData.value,
            mergeColNames: ['name'], // 需要合并的列，默认合并列相同的数据
            firstMergeColNames: [], // 受影响的列
            firstMerge: 'name' // 以哪列为基础进行合并，一般为第一列
          }))
</script>

<template>
  <div class="app-container">
    <el-table :data="tableData" border style="width: 100%" :span-method='objectSpanMethod'>
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
  </div>
</template>