快捷導(dǎo)航

vue3中el-table實現(xiàn)多表頭并表格合并行或列代碼示例

更新時間：2024年02月21日 09:49:52 作者：可愛的秋秋啊

這篇文章主要給大家介紹了關(guān)于vue3中el-table實現(xiàn)多表頭并表格合并行或列的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下

1、el-table中添加事件 :span-method="genderSpanCity"

<el-table :span-method="genderSpanCity"
              :data="data.tableData"
              :fit="true" table-layout="fixed" header-align="center" stripe
              style="width:100%;height: 96%;"
              :cell-style="{borderColor:'#aaa'}"
              :header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9',height:'50px'}"
              v-else>
      <el-table-column :label="$t('wms.dailyProduct')" align="center" height="70px">
        <el-table-column>
          <el-table-column prop="process" :label="$t('mes.workingProcedure')" width="100" align="center"/>
          <el-table-column prop="item" width="130"/>
          <el-table-column prop="item2" width="150"/>
        </el-table-column>
        <!--二級標(biāo)題日期-->
        <el-table-column v-for="(name,index) in data.title" :key="name" :label="name" align="center">
          <!-- 三級標(biāo)題-->
          <el-table-column v-for="column in data.tableColumns" :key="column.prop"
                           :prop="column.prop"
                           :label="column.label" align="center">
            <template #default="scope">
              {{ scope.row.custom.length > 0 ? scope.row.custom[index][column.prop] : scope.row.custom[column.prop] }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>

2、js添加函數(shù)

// 合并列
const genderSpanCity = ({
  row,
  column,
  rowIndex,
  columnIndex
}) => {
  // 合并前4行的2列與3列
  for (let i = 0; i < 13; i++) {
    if (columnIndex === 1 && rowIndex === i) {
      return {
        rowspan: 1,
        colspan: 2
      }
    } else if (columnIndex === 2 && rowIndex === i) {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }

  // 合并第4行以后的數(shù)據(jù)
  for (let i = 4; i < data.tableData.length; i++) {
    if (columnIndex > 3 && columnIndex % 2 === 0 && rowIndex === i) {
      return [1, 3]
    } else if (columnIndex >= 3 && columnIndex % 2 === 1 && rowIndex === i) {
      return [0, 0]
    }
  }
  // 合并前兩列的數(shù)據(jù)
  if (columnIndex === 0 || columnIndex === 1) {
    // 獲取當(dāng)前單元格的值
    const currentValue = row[column.property]
    // 獲取上一行相同列的值
    const preRow = data.tableData[rowIndex - 1]
    const preValue = preRow ? preRow[column.property] : null
    // 如果當(dāng)前值和上一行的值相同，則將當(dāng)前單元格隱藏
    if (currentValue === preValue) {
      return {
        rowspan: 0,
        colspan: 0
      }
    } else {
      // 否則計算當(dāng)前單元格應(yīng)該跨越多少行
      let rowspan = 1
      for (let i = rowIndex + 1; i < data.tableData.length; i++) {
        const nextRow = data.tableData[i]
        const nextValue = nextRow[column.property]
        if (nextValue === currentValue) {
          rowspan++
        } else {
          break
        }
      }
      return {
        rowspan,
        colspan: 1
      }
    }
  }
}