Element 的Table表格实现列合并（记得先排序、element-plus、列合并、线上已投入使用）

系列文章目录

提示：当前的功能已经投入项目中使用了，不要担心回发生什么问题！！！代码有问题直接私信我就好👌

---

---

背景如下

需求是
1、服务与不同的船公司，分别有进出口的分类
2、希望对相同业务，价格，进行列合并
3.、一句话：合并前几列相同的列，只要数据相同就可以合并

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Element-Plus 中Table表格的列合并（初版）

1.效果图如下

2. DOM结构 如下

 <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="amount1" label="Amount 1" />
      <el-table-column prop="amount2" label="Amount 2" />
      <el-table-column prop="amount3" label="Amount 3" />
    </el-table>
  </div>

3.TypeScript代码如下

interface User {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
}

interface SpanMethodProps {
  row: User
  column: TableColumnCtx<User>
  rowIndex: number
  columnIndex: number
}

const values =ref("")
const value1 =reactive({})
const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {

     if(columnIndex == 0){
     
      let spanCount = 1;

        // 从当前行往下找
        for (let i = rowIndex + 1 ; i < tableData.length; i++) {
          if (tableData[i][column.property] === row[column.property]) {
            spanCount++;
            values.value =  row[column.property]
          } else {
            break;
          }
        }
          if(spanCount === 1 && !value1[`${values.value}`])   return [1,1]
          !value1[`${values.value}`] && (value1[`${values.value}`] = spanCount)
      
         if(spanCount>(value1[`${values.value}`]-1)){
              return [spanCount,1]
          }else if (rowIndex > 0 &&tableData[rowIndex - 1][column.property] === row[column.property]) {

          return [0, 0];
        }
       
        
    }
}

二、Element-Plus 中Table表格的列合并（进阶版）

1.效果图如下

2. DOM结构 如下

  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="amount1" label="Amount 1" />
      <el-table-column prop="amount2" label="Amount 2" />
      <el-table-column prop="amount3" label="Amount 3" />
    </el-table>
  </div>

3. TypeScript代码如下

interface User {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
}

interface SpanMethodProps {
  row: User
  column: TableColumnCtx<User>
  rowIndex: number
  columnIndex: number
}

const values =ref("")
let str = ""
const value1 =reactive({})
const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {

     if(columnIndex == 0 || columnIndex == 1){
     
      let spanCount = 1;

        // 从当前行往下找
        for (let i = rowIndex + 1 ; i < tableData.length; i++) {
          if (tableData[i][column.property] === row[column.property]) {
            spanCount++;
            str =  row[column.property]
          } else {
            break;
          }
        }
                console.log(rowIndex,9999,spanCount === 1 && !value1[`${str}`])
          if(spanCount === 1 && !value1[`${str}`])   return [1,1]
          !value1[`${str}`] && (value1[`${str}`] = spanCount)
      
         if(spanCount>(value1[`${str}`]-1)){
          console.log(rowIndex,`行 -${value1[`${str}`]}  列`,columnIndex,"列-相同值",spanCount,value1,"执行次数--值",str)
              return [spanCount,1]
}else if (rowIndex > 0 &&tableData[rowIndex - 1][column.property] === row[column.property]) {
  console.log("",tableData[rowIndex - 1][column.property],row[column.property])
          return [0, 0];
        }
       
        
    }
}

二、Element-Plus 中Table表格的列合并（最终优化版）

1. TypeScript代码如下

/* 下面的方法(脑力精髓-简洁-代码量极少)*/
interface TableKeyTypes {
    eximType: string
    dndFeeType: string
    period: string
    "20GP": string
    "40GP": string
    "40HQ": string
    currency: string
    [key: string]: string;
}

interface SpanMethodProps {
    row: TableKeyTypes
    column: Record<"property", keyof TableKeyTypes>
    rowIndex: number
    columnIndex: number
}
// prohibit modify to ref (超负载)
let str = ""
const stroageValue:Record<string, string|number> = reactive({})
// colspan all from the same value
const colSpanMethod = ({
    row,
    column,
    rowIndex,
    columnIndex
}: SpanMethodProps) => {

    if (columnIndex == 0 || columnIndex == 1) {
        let spanCount = 1
        // 从当前行往下找
        for (let i = rowIndex + 1; i < colSpanTableData.value.length; i++) {
            if (colSpanTableData.value[i][`${column.property}`] === row[`${column.property}`]) {
                spanCount++
                str = row[`${column.property}`]
            } else {
                break
            }
        }
        if (spanCount === 1 && !stroageValue[`${str}`]) return [1, 1]
        !stroageValue[`${str}`] && (stroageValue[`${str}`] = spanCount)
        if (spanCount > ((stroageValue[`${str}`] as number) - 1)) {
            return [spanCount, 1]
        } else if (rowIndex > 0 && colSpanTableData.value[rowIndex - 1][`${column.property}`] === row[`${column.property}`]) {
            return [0, 0]
        }
    }
}

---

总结

提示：直接拿去Element-Plus去测试代码。已经上线过的功能，

希望可以帮助到你们 💪💪💪，一起加油