Vue 學習筆記：el-table-column 無數據時不展示實現過程

背景

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/[email protected]/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/[email protected]/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 ，並隱藏，達到無法展開的目的。

實例效果

實時運行效果如下：

tableData 中只有最後一條記錄的 children 具有子元素，所以默認其他記錄都沒有展開按鈕，點擊最後一行，展開結果爲：

編程啓示錄

.外層表的兩個屬性初始化 :default-expand-all="false"，能夠正常實現，但是如果默認展開的話，沒有數據就多一行空行，這樣雖然能展開，但是並不美觀。