Vue 学习笔记：el-table-column 无数据时不展示实现过程

2024-04-11 18:30:49

背景

Vue 开发时需要对 el-table 进行封装，使用 slot 可以定制 el-table 的内容。有一种应用场景是这样的：列表上的某一行可以点击展开查看，也就是“套表” 。

怎么让没有子列表的行不显示展开操作按钮呢？这就是本文要讨论的问题。

套表示例

套表，是通过 el-table-column 的 expand 类型，并使用 template 添加套表元素实现的。我们在 ElementUI 官网上，打开 Table 组件的一个例子在线编辑。

首先，编辑左侧 HTML 部分。
修改 HTML 内容如下：

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<div id="app">
<template>
    <el-table
      :default-expand-all="false"
      :row-class-name="getRowClass"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        type="expand"
        prop="date"
        label="日期"
        width="180">
        <template slot-scope="scope">
          <el-table 
      v-show="scope.row.children.length>0"
      :data="scope.row.children"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>
</div>

核心点如下：

外层表的第一列定义为 expand 类型，子元素模块为：

 <template slot-scope="scope">
          <el-table 
      v-show="scope.row.children.length>0"
      :data="scope.row.children"
      style="width: 100%">

套表的数据是当前行的 children 属性。

2.外层表的两个属性初始化：

      :default-expand-all="false"
      :row-class-name="getRowClass"

默认列表缩起来，且提供一个 row-class-name 的函数，它可以对 children 属性为空的行添加隐藏样式。

其次，无数据行的隐藏样式编写。

中间部分的代码如下：

@import url("//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css");
.row-expand-cover .el-table__expand-column .el-icon {
 visibility:hidden;
}

单独定义一个样式名称为 row-expand-cover ，该行下的缩进图标的样式为隐藏。

最后，右侧的数据定义。

修改右侧数据，为每个元素添加一个 children 属性，且提供一个 getRowClass 方法：

var Main = {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            children:[]
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            children:[]
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            children:[]
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            children:[{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
          }]
        }
      },
     methods:{
       getRowClass({row, rowIndex}) {
        if(row.children.length==0){
          return 'row-expand-cover';
        } else  {
          return '';
        }
      }
      }
    }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

row-class-name 函数

使用 el-table 的时候，传入了一个 row-class-name 属性，它可以单独设置某一行 tr 的样式。这里提供了一个 getRowClass 函数，它判断当前行 row 的 children 是否有数据，如果没有就单独添加一个隐藏样式 row-expand-cover 。

函数定义如下：

getRowClass({row, rowIndex}) {
        if(row.children.length==0){
          return 'row-expand-cover';
        } else  {
          return '';
        }
      }

这里的 row 就是一行的数据对象，该函数为 row.children.length==0 的行添加了一个新样式 “row-expand-cover”，该样式定位到当前 tr 元素的缩进 icon ，并隐藏，达到无法展开的目的。