【el-table】element-table合并

最新推荐文章于 2023-08-24 19:23:17 发布

进击的小白兔vl

最新推荐文章于 2023-08-24 19:23:17 发布

阅读量172

点赞数

分类专栏： element vue 文章标签： javascript vue.js 开发语言

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

版权

vue 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

element

4 篇文章 0 订阅

订阅专栏

element table合并（vue2.0)

表头合并
效果
指标列为合并表格

template中
 <el-table
  id="table"
          v-loading="tableLoading"
          row-key="id"
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"//树状
          element-loading-text="拼命加载中"
          element-loading-background="rgba(0, 0, 0, 0.6)"
          header-row-class-name="table-header"
          style="width: 100%; margin-bottom: 20px"
          :data="tableData"
          :header-cell-style="handerMethod"
          :span-method="SpanMethod">
 //指标列
 <el-table-column label="指标" align="center">
            <el-table-column
              align="center"
              width="80"
              prop="one"
            >
            </el-table-column>
            <el-table-column
              align="center"
              width="80"
              prop="two"
            >
            </el-table-column>
          </el-table-column>
           <el-table>
            <el-table-column label="产品" align="center">
            <el-table-column
              align="center"
              width="80"
              prop="one"
              label="目标"
            >
            </el-table-column>
            <el-table-column
              align="center"
              width="80"
              prop="two"
               label="实际"
            >
            </el-table-column>
          </el-table-column>
           <el-table>
           
//method中
 // 隐藏表头
    handerMethod({ row, rowIndex, column, columnIndex }) {
      if (rowIndex == 0) {
        // 把第1行的第1列变为占两行高度的表格
        row[0].rowSpan = 2;
      }
      if (rowIndex == 1) {
        // 第2行的原本第2行的1、2列高度变成0
        if (columnIndex == "0" || columnIndex == "1") {
          return { display: "none" };
        }
      }
    },
   // 合并表
    SpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 4) {//列序号
        const _row = this.listOne[rowIndex];//listOne合并数组
        const _col = row.two ? 1 : 2;
        return {
          rowspan: _row,
          colspan: _col,
        };
      } 
    },