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

背景

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

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

套表示例

套表,是通过 el-table-columnexpand 类型,并使用 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>

核心点如下:

  1. 外层表的第一列定义为 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 ,该行下的缩进图标的样式为隐藏。
Vue 学习笔记:el-table-column 无数据时不展示实现过程
最后,右侧的数据定义。

修改右侧数据,为每个元素添加一个 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 函数,它判断当前行 rowchildren 是否有数据,如果没有就单独添加一个隐藏样式 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 ,并隐藏,达到无法展开的目的。

实例效果

实时运行效果如下:
Vue 学习笔记:el-table-column 无数据时不展示实现过程
tableData 中只有最后一条记录的 children 具有子元素,所以默认其他记录都没有展开按钮,点击最后一行,展开结果为:
Vue 学习笔记:el-table-column 无数据时不展示实现过程

编程启示录

.外层表的两个属性初始化 :default-expand-all="false",能够正常实现,但是如果默认展开的话,没有数据就多一行空行,这样虽然能展开,但是并不美观。

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

Vue 学习笔记:el-table-column 无数据时不展示实现过程Vue 学习笔记:el-table-column 无数据时不展示实现过程 毕小宝 博客专家 发布了233 篇原创文章 · 获赞 489 · 访问量 37万+ 他的留言板 关注
上一篇:Pytorch expand_as()函数


下一篇:练习 3-3 编写函数expand(s1, s2) (C语言 + 详细注释)