当前位置:   article > 正文

vue elementui 复杂表头 table_vue复杂表格

vue复杂表格

一、 效果展示

  1. 表头由多行多列组成
  2. 左侧和右侧部分列固定,中间部分为动态列
  3. 表头合并列、合并行

在这里插入图片描述

二、实现方法

elementUI <el-table-column> 嵌套、 rowspan 动态设置来实现复杂表格
参考网上案例,并结合实际情况。可在 header-cell-style 回调中,对表格行进行渲染。

1、 表头可理解为三部分: leftcenterright

在这里插入图片描述

2、 left 部分

  1. <el-table-column> 多层嵌套,达到以下效果
    在这里插入图片描述

  2. header-cell-style 回调中,第一行,第一列设置 rowspan='3'

  3. header-cell-style 回调中,隐藏第一列的第二行和第三行(不影响 center 部分展示)。

3、 center 部分

  1. <el-table-column> 多层嵌套,达到以下效果
    在这里插入图片描述
  2. 堆叠其余部分。
  3. 动态列部分 v-for 加载多个 <el-table-column> 即即可。

4、 right 部分和 left 相似处理。

5、 动态设置 rowspan (解决图层覆盖问题)

当 设置 fixed 时,表格会在原表格的基础上再新增一个图层
图层属性大部分和原表格的相同,动态设置 rowspan 部分需要再新图层添加

  1. <el-table-column> 中设置 fixedtrue\left\right 。并且设置 width
  2. 子组件 <el-table-column> 内部同样设置 fixedwidth
  3. 如果父组件 <el-table-column> 有多列,则子 <el-table-column> width 之和为父组件的 width

三、完整实例代码

1、 Html 做多层嵌套

<el-table
  :data="tableData"
  style="width: 100%"
  ref="tableRef"
  :header-cell-style="rowspanStyle"
  >
  <!-- left -->
  <el-table-column label="label-left" width="300" fixed="left">
    <el-table-column label="left-label" width="300" fixed="left">
      <el-table-column label="left-label" width="300" fixed="left">
        <el-table-column label="A" prop="key1" width="100" fixed="left"></el-table-column>
        <el-table-column label="B" prop="key2" width="100" fixed="left"></el-table-column>
        <el-table-column label="C" prop="key3" width="100" fixed="left"></el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <!-- center -->
  <el-table-column label="G" width="80" fixed="left">
    <el-table-column label="F" width="80" fixed="left">
      <el-table-column label="E" width="80" fixed="left">
        <el-table-column label="D/E" prop="key4" width="80" fixed="left"></el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <el-table-column label="center-label-2">
    <el-table-column label="label-2">
      <el-table-column label="G">
        <el-table-column label="H" prop="key5" min-width="150"></el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <el-table-column label="center-label-3">
    <el-table-column label="label-3">
      <el-table-column label="G">
        <el-table-column label="H" prop="key6" min-width="150"></el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <el-table-column label="center-label-4">
    <el-table-column label="label-4">
      <el-table-column label="G">
        <el-table-column label="H" prop="key7" min-width="150"></el-table-column>
      </el-table-column>
    </el-table-column> 
  </el-table-column>
  <el-table-column label="center-label-3">
    <el-table-column label="label-3">
      <el-table-column label="G">
        <el-table-column label="H" prop="key6" min-width="150"></el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>

  <!-- right -->
  <el-table-column label="right-label" width="100" fixed="right">
    <el-table-column label="X" width="100" fixed="right">
      <el-table-column label="W" width="100" fixed="right">
        <el-table-column label="/" align="center" prop="key8" width="100" fixed="right"></el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
</el-table>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62

2、 数据模拟&图层覆盖问题

data() {
  return {
    tableData: [{
      key1: '2021-10-02',
      key2: '王小虎',
      key3: '上海',
      key4: '10',
      key5: '30',
      key6: 30,
      key7: 30,
      key8: '100%'
    }],
  }
},
methods: {
  rowspanStyle({row,column,rowIndex,columnIndex}) {
    this.$nextTick(() => {
      if(rowIndex === 0) {
        if(
          columnIndex === 0 
          || columnIndex == (row.length-1)
        ) {
          // fixed 固定表格,会在表格上方覆盖一层 相同结构的列
          // 因此 将覆盖的表格 列上也需添加 rowspan="3" 属性
          const domColumn = document.getElementsByClassName(column.id);
          for(let item of domColumn) {
            item.setAttribute("rowSpan",3);
          }
          return column;
        }
      }
      // fixed="right" 原表格和 覆盖层同时出现,将原表层内容隐藏
      if(rowIndex === 3 ){
        if(columnIndex === (row.length -1)) {
          console.log(document.getElementsByClassName(column.id));
          document.getElementsByClassName(column.id)[0].childNodes[0].style.visibility = "hidden"
        }
      }
    });
    // 最后一列设置 rowspan="3" 会空出两行,因此隐藏空出的两行
    if(rowIndex>0 && rowIndex < 3 ) {
      if(
        columnIndex ===0 
        || columnIndex === (row.length-1)
      ) {
        return {display:"none"} 
      }
    }
  },
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50

四、为什么嵌套多层<el-table-column>

1、普通表格的合并行和列

  1. 合并行
  <!-- 合并行 -->
  <table class="example-table">
    <tr>
      <td rowspan="2">A</td>
      <td>B</td>
    </tr>
    <tr>
      <td>D</td>
    </tr>
  </table>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在这里插入图片描述

  1. 合并列
  <!-- 合并列 -->
  <table class="example-table">
    <tr>
      <td colspan="2">A</td>
    </tr>
    <tr>
      <td>C</td>
      <td>D</td>
    </tr>
  </table>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在这里插入图片描述

2、elementUI 表格合并行、列

官方样例中,配送信息 列实现了合并两行,姓名 行实现了合并两列。
但从代码的实现方式来看,只能实现简单的嵌套方式合并。针对更复杂表格力不从心。

<!-- 合并行 -->
<el-table-column label="配送信息">
  <!-- 合并列 -->
  <el-table-column
    prop="name"
    label="姓名"
    width="120">
  </el-table-column>
  <el-table-column label="地址">
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
  </el-table-column>
</el-table-column>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

在这里插入图片描述

五、 参考资料

  1. elementUI 多级表头
  2. elementUI table 表头合并
  3. Element-ui table多级表头 fixed固定
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/621562
推荐阅读
相关标签