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

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

先看效果:

  1. 首先得话可以先去官网把多级表头拿过来改一下
html 复制代码
<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>
  1. 合并引用方式
ts 复制代码
import { getRowSpanMethod } from "./hooks";
const objectSpanMethod = computed(() => {
  return getRowSpanMethod(props.tableData, ["demo"]);
});
  1. ts 部分
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[item] = 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[i][key] === data[i - 1][key]) {
        rowSpanNumObject[key][index]++;
      } else {
        rowSpanNumObject[`${key}-index`] = i;
        rowSpanNumObject[key][i] = 1;
      }
    });
  }

  //提供合并的方法并导出
  // @ts-ignore
  const spanMethod = function ({ row, column, rowIndex, columnIndex }) {
    if (rowSpanArray.includes(column["property"])) {
      const rowspan = rowSpanNumObject[column["property"]][rowIndex];
      if (rowspan > 0) {
        return { rowspan: rowspan, colspan: 1 };
      }
      return { rowspan: 0, colspan: 0 };
    }
    return { rowspan: 1, colspan: 1 };
  };

  return spanMethod;
}

4.数据结构

ts 复制代码
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",
  },
];
相关推荐
如若1234 分钟前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~1 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语1 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport1 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg1 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww1 小时前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest
m0_748254881 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
星就前端叭2 小时前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc
m0_748234522 小时前
前端Vue3字体优化三部曲(webFont、font-spider、spa-font-spider-webpack-plugin)
前端·webpack·node.js
Web阿成2 小时前
3.学习webpack配置 尝试打包ts文件
前端·学习·webpack·typescript