el-table实现固定列相同合并切重排序号

效果图:
如何实现:
TypeScript 复制代码
<template>
  <div>
    <el-table
      :data="tableData"
      border
      :span-method="objectSpanMethod"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column type="index" :index="getIndex" label="序号" width="80" />
      <el-table-column prop="resourceTypeName" label="需求类型" width="180" />
      <el-table-column prop="resourceName" label="属地需求" />
      <el-table-column prop="resourceNum" label="需求数量" />
      <el-table-column prop="dispatchNum" label="AI辅助建议" />
    </el-table>
  </div>
</template>
<script setup>
import {
  onBeforeUnmount,
  onMounted,
  getCurrentInstance,
  ref,
  watch,
  nextTick,
} from "vue";

const currentIndex = ref(1);
const tableData = ref([
  {
    resourceType: "1",
    resourceTypeName: "专家",
    resourceCode: "resource_gw_hfssjdccz",
    resourceName: "XXXX内容2",
    resourceNum: "1",
    dispatchNum: "0",
  },
  {
    resourceType: "1",
    resourceTypeName: "专家",
    resourceCode: "resource_gw_swzdsjdccz",
    resourceName: "XXXX内容1",
    resourceNum: "1",
    dispatchNum: "0",
  },
  {
    resourceType: "1",
    resourceTypeName: "专家",
    resourceCode: "resource_gw_tfjxcrbdccz",
    resourceName: "XXXX内容3",
    resourceNum: "2",
    dispatchNum: "8",
  },
  {
    resourceType: "3",
    resourceTypeName: "物资",
    resourceCode: "supp_material_type_1_1_1_1",
    resourceName: "XXXX内容4",
    resourceNum: "1",
    dispatchNum: "297191",
  },
  {
    resourceType: "3",
    resourceTypeName: "物资",
    resourceCode: "supp_material_type_1_1_1_1",
    resourceName: "XXXX内容9",
    resourceNum: "1",
    dispatchNum: "297191",
  },
]);

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 1) {
    // 如果当前值和上一行的值相同,则将当前单元格隐藏
    if (row.resourceType === tableData.value[rowIndex - 1]?.resourceType) {
      return { rowspan: 0, colspan: 0 };
    } else {
      // 否则计算当前单元格应该跨越多少行
      let rowspan = 1;
      for (let i = rowIndex + 1; i < tableData.value.length; i++) {
        if (tableData.value[i].resourceType === row.resourceType) {
          rowspan++;
        } else {
          break;
        }
      }
      return { rowspan, colspan: 1 };
    }
  }
};


const getIndex = (index) => {
  const resourceType = tableData.value[index].resourceType;
  let counter = 0;
  for (let i = 0; i < index; i++) {
    if (tableData.value[i].resourceType === resourceType) {
      counter++;
    }
  }
  return currentIndex.value + counter;
};
</script>
相关推荐
533_1 小时前
[vue3 echarts] echarts 动态数据更新 setInterval
vue.js·echarts
Jimmy1 小时前
TypeScript 泛型:2025 年终极指南
前端·javascript·typescript
Spider_Man1 小时前
栈中藏玄机:从温度到雨水,单调栈的逆袭之路
javascript·算法·leetcode
jstart千语2 小时前
【vue】创建响应式数据ref和reactive的区别
前端·javascript·vue.js
BUG收容所所长2 小时前
Zustand状态管理如何驱动低代码平台的数据流?
前端·javascript·设计
盗德2 小时前
Vue渲染引擎的范式革命:从虚拟DOM到Vapor模式
前端·vue.js
BUG收容所所长2 小时前
React递归渲染与react-dnd——低代码平台的组件拖拽与动态渲染实践
前端·javascript·设计
Dolphin_海豚3 小时前
vapor 的 IR 是如何被 generate 到 render 函数的
前端·vue.js·vapor
小妖6663 小时前
Next.js 怎么使用 Chakra UI
前端·javascript·ui
胡西风_foxww3 小时前
从数据丢失到动画流畅:React状态同步与远程数据加载全解析
前端·javascript·react.js·同步·异步·数据·状态