效果预览

使用场景

当行内容过多并且不想显示横向滚动条时 或者是需要展示当前物品下所属的资产时 可以使用 Table 展开行功能。

重点参数

  1. expand-change： 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows：树形表格时第二参数为 expanded）
  2. expandedRows：其实就只当前展开行的合集。
  3. type： 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮。
  4. toggleRowExpansion：用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否 参数(row,expanded expanded 为 true 则展开)

代码示例

1
2
3
4
5
6
7
8
9
<el-table fit border size="small"  :data="deviceList" ref="dataTreeList" style="width: 100%"  @expand-change="handleExpandChange">
  <el-table-column type="expand">
    // 如果表头需要统一管理按钮 可加入以下代码
      <template slot="header" slot-scope="scope">
         <el-button type="text" size="mini" @click="toggleRowExpansion">{{ isExpansion ? "关闭" : "展开" }</el-button>
        </template>
       <template slot-scope="scope">加入需要折叠的代码</template>
  </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
    /** 表格展开与关闭 */
    toggleRowExpansion(){
      if(this.deviceList.length){
        this.isExpansion = !this.isExpansion;
        this.toggleRowExpansionAll(this.deviceList, this.isExpansion);
      }
    },
    toggleRowExpansionAll(data, isExpansion) {
      data.forEach((item) => {
        this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);
        if (item.children !== undefined && item.children !== null) {
          this.toggleRowExpansionAll(item.children, isExpansion);
        }
      });
    },
  // 判断是否所有行都展开或者关闭
  handleExpandChange(row,rows){
    if(this.deviceList.length == rows.length){
         this.isExpansion = true
   }else{
        this.isExpansion = false
     }
}