el-table根据接口返回某一个字段合并行

根据名称相同合并行

<template>
    <div>


        <el-table :data="responseSearchIntegralAddData" :span-method="objectSpanMethod1" border style="width: 100%">
            <el-table-column prop="integralTypeName" label="名称" width="180" />
            <el-table-column prop="pointBehavior" label="类型" />
            <el-table-column prop="orSingleScoreder" sortable label="积分" />
        </el-table>
    </div>
</template>

<script setup>
const responseSearchIntegralAddData = ref([]);
const nameSpanArr = ref([])


  function objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) { // 只对 name 列进行处理
      if (nameSpanArr.value[rowIndex] === undefined) {
        let count = 1;
        for (let i = rowIndex + 1; i < responseSearchIntegralAddData.value.length; i++) {
          if (responseSearchIntegralAddData.value[i].integralTypeName === row.integralTypeName) {
            count++;
            nameSpanArr.value[i] = -1; // 标记为已合并
          } else {
            break;
          }
        }
        nameSpanArr.value[rowIndex] = count;
      }
      if (nameSpanArr.value[rowIndex] > 0) {
        return {
          rowspan: nameSpanArr.value[rowIndex],
          colspan: 1
        };
      } else {
        return {
          rowspan: 0,
          colspan: 0
        };
      }
    }
  }

onMounted(() => {
    getData();
});
const getData = () => {
    const list = [
        {
            integralTypeName: "课程",
            responseSearchIntegralLists: [
                {
                    cycle: 1,
                    integralTypeName: "课程",
                    orSingleScoreder: 5,
                    orderBy: 2,
                    pointBehavior: "学习必修课",
                    status: false,
                    type: 1,
                    upperLimitScore: 3,
                },
                {
                    cycle: 2,
                    integralTypeName: "课程",
                    orSingleScoreder: 5,
                    orderBy: 3,
                    pointBehavior: "完成必修课",
                    status: true,
                    type: 1,
                    upperLimitScore: 3,
                },
                {
                    cycle: 3,
                    integralTypeName: "课程",
                    orSingleScoreder: 5,
                    orderBy: 4,
                    pointBehavior: "学习选修课",
                    status: true,
                    type: 1,
                    upperLimitScore: 3,
                },
            ],
        },
        {
            integralTypeName: "考试",
            responseSearchIntegralLists: [
                {
                    cycle: 3,
                    integralTypeName: "考试",
                    orSingleScoreder: 10,
                    orderBy: 9,
                    pointBehavior: "通过考试",
                    status: true,
                    type: 1,
                    upperLimitScore: 3,
                },
                {
                    cycle: 3,
                    integralTypeName: "考试",
                    orSingleScoreder: 10,
                    orderBy: 20,
                    pointBehavior: "上传考试",
                    status: true,
                    type: 1,
                    upperLimitScore: 5,
                },
            ],
        },
    ];
    responseSearchIntegralAddData.value = list.flatMap((item) =>
        item.responseSearchIntegralLists.map((rule) => ({
            integralTypeName: item.integralTypeName,
            ...rule,
        }))
    );
    console.log(
        responseSearchIntegralAddData.value,
        "responseSearchIntegralAddData.value"
    );
};

</script>

原文地址：https://blog.csdn.net/m0_52611940/article/details/144075461

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！