telement-plus中table合并行或者列

#element-plus中会有自带的合并方法

通过给 table 传入span-method方法可以实现合并行或列， 方法的参数是一个对象，里面包含当前行 row、当前列 column、当前行号 rowIndex、当前列号 columnIndex 四个属性。 该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。 也可以返回一个键名为 rowspan 和 colspan 的对象。

行合并（竖着合并单元格）

第一种方法可以直接复制用

1.全都需要再table中加入  :span-method="objectMethod"  这个方法

2.js代码可以直接复制用

const propertyData: any = reactive({});
const contactDotData: any = reactive({});
const getRowdata = () => {
  let tableData: Array<any> = props.tableData;
  tableData.forEach((item: any, i) => {
    for (let key in item) {
      if (props.objectMethodData?.includes(key)) {
        if (i == 0) {
          propertyData[key] = [];
          contactDotData[key] = 0;
          propertyData[key].push(1);
        } else {
          if (item[key] === tableData[i - 1][key]) {
            propertyData[key][contactDotData[key]] =
              propertyData[key][contactDotData[key]] + 1;
            propertyData[key].push(0);
          } else {
            contactDotData[key] = i;
            propertyData[key].push(1);
          }
        }
      }
    }
  });
};

const objectMethod = ({ row, column, rowIndex, columnIndex }: any) => {
  if (props.objectMethodData?.length) {
    if (props.objectMethodData.includes(column.property)) {
      if (
        propertyData[column.property] &&
        propertyData[column.property][rowIndex]
      ) {
        return [propertyData[column.property][rowIndex], 1];
      } else {
        return [0, 0];
      }
    }else {
      return [1, 1];
    }
  }else{
    return [1, 1]

  }

};

watch(
  () => props.tableData,
  (newVal) => {
    if (props.objectMethodData?.length) getRowdata();
  },
  { deep: true, immediate: true }
);

3.在使用组件的地方传入props.objectMethodData 它是个list

objectMethodData?: any;  props接受

使用的地方只需要将需要合并的这个竖排的prop（关联的value）传入即可

:objectMethodData="['hospitalCategory','hospitalDepartment']"   这样传入就可以实现咯

第二种行合并方法

const objectMethod = ({ row, column, rowIndex, columnIndex }) => {
	if (props.spanMethod) {
		return props.spanMethod({ row, column, rowIndex, columnIndex })
	} else {
		if (props.mergeFiled.length === 0) {
			return [1, 1]
		}
		if (props.mergeFiled.includes(column.property)) {
			const detailCellsMergeData = props.mergeData[row.productId]
			if (detailCellsMergeData) {
				if (rowIndex === detailCellsMergeData.startIndex) {
					return {
						rowspan: detailCellsMergeData.rowspan,
						colspan: 1,
					}
				} else {
					return {
						rowspan: 0,
						colspan: 0,
					}
				}
			}
		}
	}
}

//这里的话只是传入的list名字改变了而已  mergeFiled

spanMethod 根据自己是需要自定义合并需要就传true 这里的话默认的是false

列合并（横着合并单元格）

在 element-plus 的 el-table 组件中，原生并不支持横向合并（span-method 通常是用来纵向合并单元格的）。但你可以通过一些技巧来模拟横向合并的效果。

<template>  
  <el-table :data="tableData" :span-method="spanMethod" style="width: 100%">  
    <el-table-column prop="date" label="日期" width="180"></el-table-column>  
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>  
    <el-table-column prop="address" label="地址" width="200"></el-table-column>  
    <!-- 其他列... -->  
  </el-table>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      tableData: [  
        // 假设第一行的"姓名"和"地址"列需要合并  
        {  
          date: '2023-05-01',  
          name: '张三',  
          address: '北京',  
          spanData: {  
            name: { rowspan: 1, colspan: 2 }, // 合并姓名和地址列  
            address: { rowspan: 0, colspan: 0 }, // 隐藏地址列  
          },  
        },  
        // 其他行数据...  
      ],  
    };  
  },  
  methods: {  
    spanMethod({ row, column, rowIndex, columnIndex }) {  
      if (row.spanData && row.spanData[column.property]) {  
        return row.spanData[column.property];  
      }  
      return {  
        rowspan: 1,  
        colspan: 1,  
      };  
    },  
  },  
};  
</script>  
  
<style scoped>  
/* 你可以在这里添加一些额外的CSS样式来处理合并后的单元格 */  
</style>



进行封装的的话是下面的
1.通过接口获取data的数据list然后进行格式化
 data.forEach((i:any,index:number)=>{
        for(let key in i){
            if(i[key] == '妇科'){
                i.spanData = {
                    hsdy:{rowspan: 1, colspan: 2},
                    hssr:{rowspan: 0, colspan: 0}
                }
            }
        }
    })

备注：i[key] == '妇科' 这里根据你的情况来改变 需要合并的
      i.spanData 这里面的话表示的是第一个开始合并的prop然后clospan表示你需要你合并几列

2.在table组件中实现
const objectMethod = ({ row, column, rowIndex, columnIndex }: any) => {
  if (props.iscolSpan) {
    if (row.spanData && row.spanData[column.property]) {
      return row.spanData[column.property];
    }else {
      return [1, 1];
    }  
  } 
};

iscolSpan属性是布尔类型true/false 需要合并吗？
spanData 需要进行对应关系
然后就可以咯