elementbi表格的列合并，注意这是列合并不是行合并

先准备列合并代码

//先准备列合并代码
export function rowMergeHandle(arr, data) {
  if (!Array.isArray(arr) && !arr.length) return false;
  if (!Array.isArray(data) && !data.length) return false;
  let needMerge = {};
  arr.forEach((i, idx) => {
      needMerge[i] = {
          rowArr: [],
          rowMergeNum: 0,
      };
      if (idx == 0) {
          data.forEach((item, index) => {
              // 表格首个数据单独处理
              if (index === 0) {
                  needMerge[i].rowArr.push(1);
                  needMerge[i].rowMergeNum = 0;
              } else {
                  if (item[i] === data[index - 1][i]) {
                      needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                      needMerge[i].rowArr.push(0);
                  } else {
                      needMerge[i].rowArr.push(1);
                      needMerge[i].rowMergeNum = index;
                  }
              }
          });
      } else {
          let firstRowArr = needMerge[arr[0]].rowArr;
          let firstRowArrDeal = [];
          firstRowArr.forEach((item, index) => {
              if (item > 0) {
                  firstRowArrDeal.push(index);
              }
          });
          data.forEach((item, index) => {
              let sign = false;
              if (firstRowArrDeal.indexOf(index) > 0) {
                  needMerge[i].rowMergeNum = index;
                  sign = true;
              }
              // 表格首个数据单独处理
              if (index === 0) {
                  needMerge[i].rowArr.push(1);
                  needMerge[i].rowMergeNum = 0;
              } else {
                  if (item[i] === data[index - 1][i]) {
                      if (sign) {
                          needMerge[i].rowArr.push(1);
                      } else {
                          needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                          needMerge[i].rowArr.push(0);
                      }
                  } else {
                      needMerge[i].rowArr.push(1);
                      needMerge[i].rowMergeNum = index;
                  }
              }
          });
      }
  });
  return needMerge;
}

• 引入列合并代码 import { rowMergeHandle } from “…/…/utile/tool”;
• 在准备两个容器，一个放需要合并的字段，一个方空数组：
  • needMergeArr: [“title”,“formId”,“问卷操作”], //这里面放需要合并的字段
  • rowMergeArrs: [], //这里是空数组

/***
needMergeArr  就是上边定义的需要合并的字段数组
rowMergeArrs  就是上班定义的空数组
*/
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
 for (let res in needMergeArr) {
   if (needMergeArr[res] == column.property) {
     return mergeAction(column.property, rowIndex, columnIndex);
   }
 }

}
const mergeAction = (val, rowIndex) => {
 let _row = .rowMergeArrs[val].rowArr[rowIndex];
 let _col = _row > 0 ? 1 : 0;
 return [_row, _col];
}

完整的代码例子

  // 列合并函数
export function rowMergeHandle(arr, data) {
  if (!Array.isArray(arr) && !arr.length) return false;
  if (!Array.isArray(data) && !data.length) return false;
  let needMerge = {};
  arr.forEach((i, idx) => {
      needMerge[i] = {
          rowArr: [],
          rowMergeNum: 0,
      };
      if (idx == 0) {
          data.forEach((item, index) => {
              // 表格首个数据单独处理
              if (index === 0) {
                  needMerge[i].rowArr.push(1);
                  needMerge[i].rowMergeNum = 0;
              } else {
                  if (item[i] === data[index - 1][i]) {
                      needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                      needMerge[i].rowArr.push(0);
                  } else {
                      needMerge[i].rowArr.push(1);
                      needMerge[i].rowMergeNum = index;
                  }
              }
          });
      } else {
          let firstRowArr = needMerge[arr[0]].rowArr;
          let firstRowArrDeal = [];
          firstRowArr.forEach((item, index) => {
              if (item > 0) {
                  firstRowArrDeal.push(index);
              }
          });
          data.forEach((item, index) => {
              let sign = false;
              if (firstRowArrDeal.indexOf(index) > 0) {
                  needMerge[i].rowMergeNum = index;
                  sign = true;
              }
              // 表格首个数据单独处理
              if (index === 0) {
                  needMerge[i].rowArr.push(1);
                  needMerge[i].rowMergeNum = 0;
              } else {
                  if (item[i] === data[index - 1][i]) {
                      if (sign) {
                          needMerge[i].rowArr.push(1);
                      } else {
                          needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                          needMerge[i].rowArr.push(0);
                      }
                  } else {
                      needMerge[i].rowArr.push(1);
                      needMerge[i].rowMergeNum = index;
                  }
              }
          });
      }
  });
  return needMerge;
}


//上边是列合并函数
<template>
    <div class="home">
      <el-container class="page-main">
        
        <el-main class="main-table_container">
          <div :style="{
            height: queryParams.toolQuery.queryParamsShow
              ? 'calc(100% - 200px)'
              : 'calc(100% - 180px)',
          }">
            <el-table :data="queryParams.tableConfig.tableData.all" @selection-change="Home_SelectionChange"
              :element-loading-text="queryParams.loadingTxt" v-loading="queryParams.loading.table" highlight-current-row
              size="small" height="calc(100vh - 120px)" ref="tableData" id="exportTab" border
              header-cell-class-name="my-header-cellTwo" :span-method="objectSpanMethod">
              <el-table-column align="center" type="selection" width="55" />
  
              <!-- <el-table-column type="index" width="50" fixed> </el-table-column> -->
              <template v-for="(
                  column, index
                ) in queryParams.tableConfig.tableColumn.filter(
                  (item) => item.show
                )">
                <el-table-column v-if="column.field === 'jobtime'" :prop="column.field" :label="column.label"
                  :min-width="column.width" :sortable="column.sortable ? true : false">
                  <template #default="scope">
                    <span>{{ dateFormat(scope.row.jobtime) }} </span>
                  </template>
                </el-table-column>
  
                <el-table-column v-else-if="column.field === 'sfid'" :prop="column.field" :label="column.label"
                  :min-width="column.width" :sortable="column.sortable ? true : false">
                  <template #default="scope">
                    <span>{{ scope.row.sfid }} </span>
                  </template>
                </el-table-column>
  
                <el-table-column v-else :label="column.label" :fixed="column.fixed" :min-width="column.width"
                  :prop="column.field" :sortable="column.sortable ? true : false">
                </el-table-column>
              </template>
  
              <el-table-column fixed="right" align="center" label="问题操作" width="100">
                <template #default="scope">
                  <el-button link type="primary" size="small" @click="FN_Sealp(scope.row, 'edit')">编辑</el-button>
                  <el-button link type="danger" size="small" @click="FN_Sealp(scope.row, 'del')">删除</el-button>
                </template>
              </el-table-column>
              <el-table-column fixed="right" align="center" label="问卷操作" prop="问卷操作" width="100">
                <template #default="scope">
                  <el-button link type="primary" size="small" @click="FN_Sealp(scope.row, 'edit')">编辑</el-button>
                  <el-button link type="danger" size="small" @click="FN_Sealp(scope.row, 'del')">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-main>
      </el-container>
    </div>
  </template>
  <script setup>
  import { ref, onMounted, nextTick, defineComponent, createVNode } from "vue";
  
  import {
    GetQuestionList,
  } from "../../api/OnlineConsultation/index";
  import {
    rowMergeHandle
  } from "../../utile/tool";
  
  const tableData = ref(null);
  const fullscreenLoading = ref(false);
  let queryParams = ref({
      action: false,
      Cookie_USER: null,
      loadingTxt: "",
      loading: {
        table: false,
      },

      tableConfig: {
        tableData: {
          all: [],
        },
        tableColumn: [
          {
            field: "title",
            show: true,
            width: "",
            label: "问卷标题",
            sortable: false,
          },
          {
            field: "formId",
            show: true,
            width: "",
            label: "问卷编号",
            sortable: false,
          },
          {
            field: "questionText",
            show: true,
            width: "",
            label: "问题",
            sortable: false,
          },
          {
            field: "createDate",
            show: true,
            width: "",
            label: "创建时间",
            sortable: false,
          },
        ],
      },
      pageConfig: {
        //每页行数F_IsCutOff
        limit: 50,
        // 当前页
        page: 1,
        //总记录数
        count: 0,
      },
      needMergeArr: ["title", "formId", "问卷操作"], //需要合并的字段
      rowMergeArrs: [],
  })
  // 列表初始化
  const getPageList = () => {
    let obj = {
      name: queryParams.value.toolQuery.queryParams.openarea, //发放地
      page: queryParams.value.pageConfig.page,
      limit: queryParams.value.pageConfig.limit,
    };
    queryParams.value.loading.table = true;
    queryParams.value.loadingTxt = "加载中。。。";
  
    window.setTimeout(() => {
      queryParams.value.tableConfig.tableData.all = [];
      GetQuestionList(obj).then((res) => {
        if (res.code !== 200) {
          ElNotification({
            title: "失败",
            message: res.msg,
            type: "error",
          });
          return;
        }
  
        queryParams.value.loading.table = false;
        queryParams.value.loadingTxt = "";
        queryParams.value.tableConfig.tableData.all = res.data.list;
        queryParams.value.pageConfig.count = res.data.count;
        queryParams.value.rowMergeArrs = rowMergeHandle(queryParams.value.needMergeArr, res.data.list)
        nextTick(() => {
          if (tableData.value && tableData.value.doLayout) {
            tableData.value.doLayout();
          }
        });
      });
    }, 300);
  };
  
  const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    for (let res in queryParams.value.needMergeArr) {
      if (queryParams.value.needMergeArr[res] == column.property) {
        return mergeAction(column.property, rowIndex, columnIndex);
      }
    }
  
  }
  const mergeAction = (val, rowIndex) => {
    let _row = queryParams.value.rowMergeArrs[val].rowArr[rowIndex];
    let _col = _row > 0 ? 1 : 0;
    return [_row, _col];
  }
  
 
  onMounted(() => {
  });
  </script>
    
  
  <style>
  .my-header-cellTwo {
    font-weight: bold !important;
    background: #f2f6fc !important;
    color: #303133;
  }
  
  .el-table__body tr:hover>td {
  
    background-color: #ffc0cb !important;
  
  }
  </style>