vue3 列表合并功能 （带计算总分和选项单选打勾样式）

html部分
:span-method="listSpanMethod"合并方法
:header-cell-style="listRowMethod"表头合并方法
@cell-click="handle"点击单元格方法

  <el-table
          class="main_table"
          :data="bzyjList"
          :span-method="listSpanMethod"
          :header-cell-style="listRowMethod"
          @cell-click="handle"
          border
          :resizable="false"
          style="width: 100%"
        >
          <el-table-column label="中医证候/积分">
            <el-table-column prop="flmc" width="150"></el-table-column>
            <el-table-column prop="zhmc" width="100"></el-table-column>
          </el-table-column>
          <el-table-column prop="jfms0" label="0" width="80">
            <template #default="scope">
              <span>{{ scope.row.jfms0 }}</span>
              <el-icon
                color="#FF0000"
                v-if="
                  scope.column.property == scope.row.click || scope.row.jf == 0
                "
              >
                <Select />
              </el-icon>
            </template>
          </el-table-column>
          <el-table-column prop="jfms2" label="2">
            <template #default="scope">
              <span>{{ scope.row.jfms2 }}</span>
              <el-icon
                color="#FF0000"
                v-if="
                  scope.column.property == scope.row.click || scope.row.jf == 2
                "
              >
                <Select />
              </el-icon>
            </template>
          </el-table-column>
          <el-table-column prop="jfms4" label="4">
            <template #default="scope">
              <span>{{ scope.row.jfms4 }}</span>
              <el-icon
                color="#FF0000"
                v-if="
                  scope.column.property == scope.row.click || scope.row.jf == 4
                "
              >
                <Select />
              </el-icon>
            </template>
          </el-table-column>
          <el-table-column prop="jfms6" label="6">
            <template #default="scope">
              <span>{{ scope.row.jfms6 }}</span>
              <el-icon
                color="#FF0000"
                v-if="
                  scope.column.property == scope.row.click || scope.row.jf == 6
                "
              >
                <Select />
              </el-icon>
            </template>
          </el-table-column>
          <el-table-column prop="jf" width="80" label="积分">
            <template #default="scope">
              <span>{{ scope.row.jf }}</span>
            </template>
          </el-table-column>
          <el-table-column width="80" prop="zjf" label="总分">
            <template #default="scope">
              <div>{{ jszf(scope.row) }}</div>
            </template>
          </el-table-column>
        </el-table>

js部分

//合并表头
const listRowMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex === 1) {
    //这里为了是将第二列的表头隐藏，就形成了合并表头的效果
    return { display: "none" };
  }
};
//合并行
const listSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  //等于0的时候，表示是第一行，需要合并
  if (columnIndex === 0 || columnIndex === 7) {
    let spanArr = getSpanArr(bzyjList.value, "flmc");
    const _row = spanArr[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col,
    };
  }
};
// 处理合并行的数据
const getSpanArr = (data, spanKey) => {
  let spanArr = [];
  let pos = "";
  for (let i = 0; i < data.length; i++) {
    if (i === 0) {
      spanArr.push(1);
      pos = 0;
    } else {
      // 判断当前元素与上一个元素是否相同
      if (data[i][spanKey] === data[i - 1][spanKey]) {
        spanArr[pos] += 1;
        spanArr.push(0);
      } else {
        spanArr.push(1);
        pos = i;
      }
    }
  }
  return spanArr;
};
//点击单元格方法
function handle(row, column, event, cell) {
  let jf = parseInt(column.label)
  if([0,2,4,6].includes(jf)){
    row.click = column.property
    row.jf = jf
  }
}
//计算总分
const jszf = computed(() => (row) => {
  if (row.flmc) {
    let arr = bzyjList.value.filter((item) => {
      return item.flmc === row.flmc;
    });
    let zjf = 0;
    arr.forEach((item) => {
      zjf += Number(item.jf);
    });
    row.zjf = zjf;
    return zjf;
  }
  return "";
});

//添加按钮操作，清空列表数据和打勾样式
bzyjList.value.map((item) => {
item.jf = null;
item.click = false;
});
效果图