Vue3+Ts+Element-Plus多级表头以及动态合并单元格

Vue3+Ts+element-PLUS 多级表头以及动态合并单元格

先看效果：

• 起首得话可以先去官网把多级表头拿过来改一下
  

1. <el-table
2.   stripe
3.   border
4.   :maxHeight="windowHeight - 385"
5.   :data="tableData"
6.   style="width: 100%"
7.   :span-method="objectSpanMethod"
8. >
9.   <el-table-column align="center" prop="demo" label="demo" />
10.   <el-table-column width="200" prop="demo1" label="demo1" show-overflow-tooltip>
11.   </el-table-column>
12.   <el-table-column align="center" label="学习需求">
13.     <el-table-column align="center" :prop="`xuexixuqiu`" label="不感兴趣">
14.       <template #default="{ row }">
15.         <span v-if="!row.xuexixuqiu">
16.           <el-icon size="20" color="red">
17.             <CircleCloseFilled />
18.           </el-icon>
19.         </span>
20.       </template>
21.     </el-table-column>
22.     <el-table-column align="center" :prop="`xuexixuqiu`" label="感兴趣">
23.       <template #default="{ row }">
24.         <span v-if="row.xuexixuqiu">
25.           <el-icon size="20" color="green">
26.             <SuccessFilled />
27.           </el-icon>
28.         </span>
29.       </template>
30.     </el-table-column>
31.   </el-table-column>
32.   <el-table-column align="center" label="你好">
33.     <el-table-column align="center" prop="qianming1" label="1签名" />
34.     <el-table-column align="center" prop="qianming2" label="2签名" />
35.   </el-table-column>
36.   <el-table-column align="center" label="再见">
37.     <el-table-column align="center" prop="zaijian1" label="再见1" width="120" />
38.     <el-table-column align="center" prop="zaijian2" label="再见2" width="120" />
39.     <el-table-column align="center" prop="zaijian3" label="再见3" />
40.     <el-table-column align="center" prop="zaijian4" label="再见4" width="120" />
41.   </el-table-column>
42. </el-table>

复制代码

• 合并引用方式
  

1. import { getRowSpanMethod } from "./hooks";
2. const objectSpanMethod = computed(() => {
3.   return getRowSpanMethod(props.tableData, ["demo"]);
4. });

复制代码

• ts 部门
  

1. /**
2. * 合并相同数据，导出合并列所需的方法(只适合el-table)
3. * @param {Object} data
4. * @param {Object} rowSpanArray
5. */
6. export function getRowSpanMethod(data: any, rowSpanArray: any) {
7.   /**
8.    * 要合并列的数据
9.    */
10.   const rowSpanNumObject: any = {};
12.   //初始化 rowSpanNumObject
13.   rowSpanArray.map((item: any) => {
14.     rowSpanNumObject[item] = new Array(data.length).fill(1, 0, 1).fill(0, 1);
15.     rowSpanNumObject[`${item}-index`] = 0;
16.   });
17.   //计算相关的合并信息
18.   for (let i = 1; i < data.length; i++) {
19.     rowSpanArray.map((key: any) => {
20.       const index = rowSpanNumObject[`${key}-index`];
21.       if (data[i][key] === data[i - 1][key]) {
22.         rowSpanNumObject[key][index]++;
23.       } else {
24.         rowSpanNumObject[`${key}-index`] = i;
25.         rowSpanNumObject[key][i] = 1;
26.       }
27.     });
28.   }
30.   //提供合并的方法并导出
31.   // @ts-ignore
32.   const spanMethod = function ({ row, column, rowIndex, columnIndex }) {
33.     if (rowSpanArray.includes(column["property"])) {
34.       const rowspan = rowSpanNumObject[column["property"]][rowIndex];
35.       if (rowspan > 0) {
36.         return { rowspan: rowspan, colspan: 1 };
37.       }
38.       return { rowspan: 0, colspan: 0 };
39.     }
40.     return { rowspan: 1, colspan: 1 };
41.   };
43.   return spanMethod;
44. }

复制代码

4.数据结构

1. const tableData: User[] = [
2.   {
3.     demo: "项目1",
4.     demo1: "数据1111111111",
5.     xuexixuqiu: false,
6.     qianming1: "wang",
7.     qianming2: "fang",
8.     zaijian1: "A",
9.     zaijian2: "好，太好了",
10.     zaijian3: "再见3",
11.     zaijian4: "再见4",
12.   },
13.   {
14.     demo: "项目1",
15.     demo1: "数据1111111111",
16.     xuexixuqiu: false,
17.     qianming1: "wang",
18.     qianming2: "fang",
19.     zaijian1: "A",
20.     zaijian2: "好，太好了",
21.     zaijian3: "再见3",
22.     zaijian4: "再见4",
23.   },
25.   {
26.     demo: "项目2",
27.     demo1: "数据1111111111",
28.     xuexixuqiu: false,
29.     qianming1: "wang",
30.     qianming2: "fang",
31.     zaijian1: "A",
32.     zaijian2: "好，太好了",
33.     zaijian3: "再见3",
34.     zaijian4: "再见4",
35.   },
37.   {
38.     demo: "项目2",
39.     demo1: "数据1111111111",
40.     xuexixuqiu: false,
41.     qianming1: "wang",
42.     qianming2: "fang",
43.     zaijian1: "A",
44.     zaijian2: "好，太好了",
45.     zaijian3: "再见3",
46.     zaijian4: "再见4",
47.   },
49.   {
50.     demo: "项目2",
51.     demo1: "数据1111111111",
52.     xuexixuqiu: false,
53.     qianming1: "wang",
54.     qianming2: "fang",
55.     zaijian1: "A",
56.     zaijian2: "好，太好了",
57.     zaijian3: "再见3",
58.     zaijian4: "再见4",
59.   },
60. ];

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。