vue里使用elementUI里的下拉樹表格，如何定義個性化的子表格？

最近項目寫到一個業務，首先需要展示各類分組的基本信息，然后需要點擊每個分組展示該分組下子的所有具體信息

一開始我是打算用tab來展示就是首先父分組的名稱就是各個不同的tab按鈕，然后點擊按鈕再展示不同的子表格信息

but...產品說不行，要一開始就展示一個表格，然后每一行可以點擊下拉，再展示一個子表格

然后我就在餓了么官網尋找有沒有對應的組件，當我看見下面這個組件時很開心以為可以直接用了

但是，當我點開始發現並不是我想要的那樣

這里的子表格並沒有表頭，而且和父表格的表頭內容一樣，並不是自定義的

然后又找了一個，這里也只是展示了每行信息的詳情

這時候我們該怎么辦呢？自己重新寫個組件？還是直接把el的源碼拿過來修改源碼樣式？寫出來倒是不難，但是時間不允許啊，同時你還要考慮各種兼容性，以及樣式風格

然后又看了一下上面這個代碼，這里是個form表單，那我可不可以把它換成一個個性化的表格呢

然后我在代碼里這樣寫

<!-- 展開子表格 -->
        <el-table-column type="expand"
          align="center">
          <template slot-scope="props">
            <el-table :data="props.row.dicts">
              <el-table-column prop="label"
                label="名稱">
              </el-table-column>
              <el-table-column prop="value"
                label="值">
              </el-table-column>
              <el-table-column prop="sort"
                label="排序">
              </el-table-column>
              <el-table-column prop="remarks"
                show-overflow-tooltip
                label="備注">
              </el-table-column>
              <!-- 子表格操作列 -->
              <el-table-column header-align="center"
                align="center"
                width="160"
                label="操作">
                <template slot-scope="scope">
                  <el-button-group>
                    <el-button size="mini"
                      title="編輯"
                      type="primary"
                      circle
                      @click="handleEditDict(scope.row)">
                      <i class="fa fa-pencil"></i>
                    </el-button>
                    <el-button size="mini"
                      title="刪除"
                      type="danger"
                      circle
                      @click="handleDeleteDict(scope.row)">
                      <i class="fa fa-trash-o"></i>
                    </el-button>
                  </el-button-group>
                </template>
              </el-table-column>

 

然后運行代碼↓perfect

下面就是子表格的數據該怎么渲染呢，這是個很關鍵的問題，而且我們還要實現那種懶加載，點擊后才去請求后台

看官網里表格里的事件方法

這時候給父表格加了這個事件

<!-- 數據表格 -->
      <el-table row-key="id"
        fit
        highlight-current-row
        :data="pageData.results"
        :header-row-class-name="'table-head-th'"
        @expand-change="handleExpendRow">

下面就在代碼里說明如何進行數據綁定

handleExpendRow(row, expandedRows) { //這里是點擊每一行會觸發的方法
      if (!row.dicts) { //這里做了一個判斷，首先判斷這一行的數據對象有沒有dicts這個屬性，如果沒說明沒有數據我們需要請求后台，相當於懶加載
        this.queryDictData(row.id, row.labelType) //關鍵就是這個方法，row.id是父分組的id需要傳給后台查詢該子分組的信息
      }
    },
queryDictData(id, labelType) {
      let self = this
      labelService.getLabels({ groupCode: labelType }).then(rspData => { //這里是我們項目里封裝的ajax請求方法，相當於axios.post()
        console.log(rspData)
        const index = self.pageData.results.findIndex(data => data.id === id) //首先pageData.results綁定的是父表格的數據，那么我們要把子表格數據塞到對應的父分組，那我們要知道是哪一個分組，這里的findIndex就是通過id去查找對應的父分組在數據數組里的下標
        if (rspData.data && rspData.data.length) {
          rspData.data.forEach(item => { //這里我是給每個子分組信息里都加上父分組的id，以方便后面操作子表格每一行后，回調函數里刷新數據時需要用到，要知道他的父親是誰，哈哈
            item.labelId = id
          })
        }
        self.$set(self.pageData.results[index], 'dicts', rspData.data) //這里就是給父表格數據數組self.pageData.results第index個對象加上dicts這個屬性，然后把rspData.data我們從后台拿到的數據綁定到dicts這個key里

}) }

這時候我們刷新頁面就看到如下，成功完成下拉自定義個性自表格

 

 good！(*^_^*)