ant组件库 a-table表格合并单元格

最新推荐文章于 2024-09-06 15:28:28 发布

进击的小白兔vl

最新推荐文章于 2024-09-06 15:28:28 发布

阅读量1.3k

点赞数

分类专栏： js vue 文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/m0_46404694/article/details/122254735

版权

js 同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

vue

28 篇文章 0 订阅

订阅专栏

需求行/列合并

data中：

TableHeader: [
        {
          key: "label",
          dataIndex: "label",
          title: "类别",
          fixed: "left",
          width: 60,
          align: "left",
          colSpan: 2,//简单合并表头，合并2 ，在第二个表头加 colSpan: 0（即不渲染）
          customRender: (value, key, index) => {
            const obj = {
              children: value,
              attrs: {
                rowSpan: this.mergeCells("label", index),/返回合并数
              },
            };
            return obj;
          },
        },

思路求出合并行数组，利用 customRender返回rowSpan

方法中

  mergeCells(key, index) {
      let redata2 = this.yearTableData;//表格数据
      let pos2 = 0;
      this.spanArr = [];//合并数数组
      redata2.reduce((old, cur, i) => {
        // old 上一个元素  cur 当前元素  i 索引
        if (i === 0) {
          // 第一次判断先增加一个 1 占位 ，索引为0
          this.spanArr.push(1);
          pos2 = 0;
        } else {
          if (cur[key] == old[key]) {
            this.spanArr[pos2] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            pos2 = i;
          }
        }
        return cur;
      }, {});
      // console.log(this.spanArr)
      return this.spanArr[index];
    },

element-UI

methods中：
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 第一列合并

      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        let _col = _row > 0 ? 1 : 0;
        // if(!row.value){
        //    _col=2
        // }
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
el-table
中
  <el-table
            :data="tableData"
            border
            style="width: 100%"
            :span-method="objectSpanMethod"//合并方法
            max-height="460"
          >
            <el-table-column prop="module" label="功能模块" width="180" />
            <el-table-column prop="menu" label="菜单" width="180" />
            <el-table-column prop="instructions" label="说明" />
          </el-table>