#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 需要进行对应关系
然后就可以咯