Vue3+Ts+Element-Plus多级表头以及动态合并单元格
Vue3+Ts+element-PLUS 多级表头以及动态合并单元格先看效果：
https://i-blog.csdnimg.cn/direct/50edf5502b1f4e97a99b460e9f560a07.png
[*]起首得话可以先去官网把多级表头拿过来改一下
<el-table
stripe
border
:maxHeight="windowHeight - 385"
:data="tableData"
style="width: 100%"
:span-method="objectSpanMethod"
>
<el-table-column align="center" prop="demo" label="demo" />
<el-table-column width="200" prop="demo1" label="demo1" show-overflow-tooltip>
</el-table-column>
<el-table-column align="center" label="学习需求">
<el-table-column align="center" :prop="`xuexixuqiu`" label="不感兴趣">
<template #default="{ row }">
<span v-if="!row.xuexixuqiu">
<el-icon size="20" color="red">
<CircleCloseFilled />
</el-icon>
</span>
</template>
</el-table-column>
<el-table-column align="center" :prop="`xuexixuqiu`" label="感兴趣">
<template #default="{ row }">
<span v-if="row.xuexixuqiu">
<el-icon size="20" color="green">
<SuccessFilled />
</el-icon>
</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column align="center" label="你好">
<el-table-column align="center" prop="qianming1" label="1签名" />
<el-table-column align="center" prop="qianming2" label="2签名" />
</el-table-column>
<el-table-column align="center" label="再见">
<el-table-column align="center" prop="zaijian1" label="再见1" width="120" />
<el-table-column align="center" prop="zaijian2" label="再见2" width="120" />
<el-table-column align="center" prop="zaijian3" label="再见3" />
<el-table-column align="center" prop="zaijian4" label="再见4" width="120" />
</el-table-column>
</el-table>
[*]合并引用方式
import { getRowSpanMethod } from "./hooks";
const objectSpanMethod = computed(() => {
return getRowSpanMethod(props.tableData, ["demo"]);
});
[*]ts 部门
/**
* 合并相同数据，导出合并列所需的方法(只适合el-table)
* @param {Object} data
* @param {Object} rowSpanArray
*/
export function getRowSpanMethod(data: any, rowSpanArray: any) {
/**
* 要合并列的数据
*/
const rowSpanNumObject: any = {};
//初始化 rowSpanNumObject
rowSpanArray.map((item: any) => {
rowSpanNumObject = new Array(data.length).fill(1, 0, 1).fill(0, 1);
rowSpanNumObject[`${item}-index`] = 0;
});
//计算相关的合并信息
for (let i = 1; i < data.length; i++) {
rowSpanArray.map((key: any) => {
const index = rowSpanNumObject[`${key}-index`];
if (data === data) {
rowSpanNumObject++;
} else {
rowSpanNumObject[`${key}-index`] = i;
rowSpanNumObject = 1;
}
});
}
//提供合并的方法并导出
// @ts-ignore
const spanMethod = function ({ row, column, rowIndex, columnIndex }) {
if (rowSpanArray.includes(column["property"])) {
const rowspan = rowSpanNumObject];
if (rowspan > 0) {
return { rowspan: rowspan, colspan: 1 };
}
return { rowspan: 0, colspan: 0 };
}
return { rowspan: 1, colspan: 1 };
};
return spanMethod;
}
4.数据结构
const tableData: User[] = [
{
demo: "项目1",
demo1: "数据1111111111",
xuexixuqiu: false,
qianming1: "wang",
qianming2: "fang",
zaijian1: "A",
zaijian2: "好，太好了",
zaijian3: "再见3",
zaijian4: "再见4",
},
{
demo: "项目1",
demo1: "数据1111111111",
xuexixuqiu: false,
qianming1: "wang",
qianming2: "fang",
zaijian1: "A",
zaijian2: "好，太好了",
zaijian3: "再见3",
zaijian4: "再见4",
},
{
demo: "项目2",
demo1: "数据1111111111",
xuexixuqiu: false,
qianming1: "wang",
qianming2: "fang",
zaijian1: "A",
zaijian2: "好，太好了",
zaijian3: "再见3",
zaijian4: "再见4",
},
{
demo: "项目2",
demo1: "数据1111111111",
xuexixuqiu: false,
qianming1: "wang",
qianming2: "fang",
zaijian1: "A",
zaijian2: "好，太好了",
zaijian3: "再见3",
zaijian4: "再见4",
},
{
demo: "项目2",
demo1: "数据1111111111",
xuexixuqiu: false,
qianming1: "wang",
qianming2: "fang",
zaijian1: "A",
zaijian2: "好，太好了",
zaijian3: "再见3",
zaijian4: "再见4",
},
];
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]