有关table组件列合并的方法_table合并列-优快云博客

本文链接：https://blog.youkuaiyun.com/armanted/article/details/139040478

初始图：

最终效果：

代码实例：

html代码

 <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column
          prop="year"
          label="指标年度"
          width="90"
          align="center"
        />
        <el-table-column prop="type" label="指标类型" align="center" />
        <el-table-column prop="indexTotal" label="指标数量 " align="center" />
        <el-table-column
          prop="deptCompletionDegree"
          label="部门完成度 "
          align="center"
        />
        <el-table-column prop="nickName" label="详细分配 " align="center">
          </template>
        </el-table-column>
        <el-table-column
          prop="userCompletionDegree"
          label="项目负责人完成度 "
          align="center"
        />
      </el-table>

js代码

//表格数据
const tableData=[
    {
        "year": "2021",
        "type": 1,
        "indexTotal": 10,
        "deptCompletionDegree": "0%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    },
    {
        "year": "2021",
        "type": 1,
        "indexTotal": 6,
        "deptCompletionDegree": "0%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    },
    {
        "year": "2024",
        "type": 1,
        "indexTotal": 5,
        "deptCompletionDegree": "20%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    },
    {
        "year": "2024",
        "type": 1,
        "indexTotal": 15,
        "deptCompletionDegree": "0%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    },
    {
        "year": "2024",
        "type": 1,
        "indexTotal": 2,
        "deptCompletionDegree": "0%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    }
]

// 定义合并列对象数组
const mergeConfigs = ref([
  { key: "year", mergeArray: [1], mergeIndex: 0 },
  { key: "type", mergeArray: [1], mergeIndex: 0 },
  { key: "deptCompletionDegree", mergeArray: [1], mergeIndex: 0 },
]);
// 处理合并列数组方法
const getHistoryTableData = async () => {
  // 初始化第一个元素已经在声明时完成，不需要再进行初始化

  // 遍历 tableData 数组
  tableData .value.forEach((item: any, index: any) => {
    if (index === 0) return; // 第一个元素已经初始化过，跳过

    // 获取前一个元素
    const previousItem = tableData .value[index - 1];

    // 遍历合并配置，执行相应的合并逻辑
    mergeConfigs.value.forEach((config: any) => {
      const { key, mergeArray, mergeIndex } = config;

      if (item[key] === previousItem[key]) {
        // 当前元素与前一个元素相同，增加当前合并单元格的计数
        mergeArray[mergeIndex] += 1;
        // 在合并数组中添加一个0，表示这个位置不需要合并
        mergeArray.push(0);
      } else {
        // 当前元素与前一个元素不同，表示需要开始一个新的合并单元格
        mergeArray.push(1);
        // 更新索引为当前元素位置
        config.mergeIndex = index;
      }
    });
  });
};


const objectSpanMethod: any = ({ row, column, rowIndex, columnIndex }: any) => {
  // 合并列的字符串数组
  const tableMergeArr = ["year", "type", "deptCompletionDegree"];

  if (tableMergeArr.includes(column.property)) {
    // 找到合并列对象数组对应下标
    const colIndex = mergeConfigs.value.findIndex(
      (item: any) => item.key === column.property
    );
    return {
      //将需要合并的行数赋值给 _row，注意这里由上一个方法的输出[1,1,2,0]可以知道，
      rowspan: mergeConfigs.value[colIndex].mergeArray[rowIndex],
      //colspan有两种情况要不是0不显示，要不是1显示，根据rowspan（ _row）来确定；
      colspan: mergeConfigs.value[colIndex].mergeArray[rowIndex] > 0 ? 1 : 0,
    };
  }
};

设置后面的列合并数目不超过前面的

实现效果：

实现代码：

//表格数据
const tableData=[
    {
        "year": "2021",
        "type": 1,
        "indexTotal": 10,
        "deptCompletionDegree": "0%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    },
    {
        "year": "2021",
        "type": 1,
        "indexTotal": 6,
        "deptCompletionDegree": "0%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    },
    {
        "year": "2024",
        "type": 1,
        "indexTotal": 5,
        "deptCompletionDegree": "20%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    },
    {
        "year": "2024",
        "type": 1,
        "indexTotal": 15,
        "deptCompletionDegree": "0%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    },
    {
        "year": "2020",
        "type": 1,
        "indexTotal": 2,
        "deptCompletionDegree": "0%",
        "nickName": "无数据",
        "userCompletionDegree": 0
    }
]

// 定义合并列对象数组
const mergeConfigs = ref([
  { key: "year", mergeArray: [1], mergeIndex: 0 },
  { key: "type", mergeArray: [1], mergeIndex: 0 },
  { key: "deptCompletionDegree", mergeArray: [1], mergeIndex: 0 },
]);
// 处理合并列数组方法
const getHistoryTableData = async () => {
  // 初始化第一个元素已经在声明时完成，不需要再进行初始化

  // 遍历 tableData 数组
  tableData .value.forEach((item: any, index: any) => {
    if (index === 0) return; // 第一个元素已经初始化过，跳过

    // 获取前一个元素
    const previousItem = tableData .value[index - 1];

    // 遍历合并配置，执行相应的合并逻辑
    mergeConfigs.value.forEach((config: any) => {
      const { key, mergeArray, mergeIndex } = config;

      if (item[key] === previousItem[key]) {
       // 当前元素与前一个元素相同，
        if (configIndex === 0) {
          //  第一列直接合并
          mergeArray[mergeIndex] += 1;
          mergeArray.push(0);
        } else if (
          mergeConfigs.value[configIndex - 1].mergeArray[index - 1] == 0 &&
          mergeConfigs.value[configIndex].mergeArray[index - 1] == 0 &&
          mergeConfigs.value[configIndex - 1].mergeArray[index] > 0
        ) {
          // 如果第 N+1 列相同超出第 N 列始一个新的合并单元格
          mergeArray.push(1);
          config.mergeIndex = index;
        } else {
          // 当前元素与前一个元素相同，增加当前合并单元格的计数
          mergeArray[mergeIndex] += 1;
          // 在合并数组中添加一个0，表示这个位置不需要合并
          mergeArray.push(0);
        }
      } else {
        // 当前元素与前一个元素不同，表示需要开始一个新的合并单元格
        mergeArray.push(1);
        // 更新索引为当前元素位置
        config.mergeIndex = index;
      }
    });
  });
};


const objectSpanMethod: any = ({ row, column, rowIndex, columnIndex }: any) => {
  // 合并列的字符串数组
  const tableMergeArr = ["year", "type", "deptCompletionDegree"];

  if (tableMergeArr.includes(column.property)) {
    // 找到合并列对象数组对应下标
    const colIndex = mergeConfigs.value.findIndex(
      (item: any) => item.key === column.property
    );
    return {
      //将需要合并的行数赋值给 _row，注意这里由上一个方法的输出[1,1,2,0]可以知道，
      rowspan: mergeConfigs.value[colIndex].mergeArray[rowIndex],
      //colspan有两种情况要不是0不显示，要不是1显示，根据rowspan（ _row）来确定；
      colspan: mergeConfigs.value[colIndex].mergeArray[rowIndex] > 0 ? 1 : 0,
    };
  }
};