vue+Element合并单元格

141 阅读1分钟

Vue3写法 指定列进行合并

使用el-table官方文档在表格中增加span-method方法

<template>
 <el-table
 :span-method="objectSpanMethod"
 >
 </el-table>
</template>

js部分vue3写法

export default {
  setup(){
  const state = reactive({
      data:[
      {value:"香香",lable:"1"},
      {value:"香香",lable:"2"},
      {value:"香香",lable:"3"}
      ],
      posArr: [],
      pos: "",
      });
   // 合并方法
     function search(){
          state.posArr = [];
          state.pos = "";
          for (var i = 0; i < state.data.length; i++) {
            if (i === 0) {
              state.posArr.push(1);
              state.pos = 0;
            } else {
              // 判断当前元素与上一个元素是否相同
              const list = state.data;
              if (list[i].lable === list[i - 1].lable) {
                state.posArr[state.pos] += 1;
                state.posArr.push(0);
              } else {
                state.posArr.push(1);
                state.pos = i;
              }
            }
          }
   }
   // 表格指定列合并
    function objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        const _row = state.posArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    }
   }
 }