element ui --- table 樹形數據表格的點擊整行展開收起，以及初始收起狀態。

官網指路 

實現效果如下圖，點擊有子集的表格行可展開或收起子集。

 

 

 代碼如下：

 // 列表點擊事件
        getOpenDetail(row){
            this.$refs.theTable.toggleRowExpansion(row);
        },

 <el-table  
       border 
       ref="theTable"
       :data="deductList"
       highlight-current-row
       @row-click="getOpenDetail"
       :row-class-name="tableRowClassName"
       :header-cell-style="{background: 'rgb(240, 240, 240,.4)'}"
       row-key="id"
      :tree-props="{ children: 'itemList', hasChildren:'hasChildren'}">
       <el-table-column align="center" prop="data"  width="160"  label="日期"></el-table-column>
       <el-table-column align="center" prop="name" label="姓名">    </el-table-column>
</el-table>

 :header-cell-style 設置表頭顏色，row-key="id" 樹形數據表格每層數據必須有唯一值才能正常渲染，

:tree-props="{ children: 'itemList', hasChildren:'hasChildren'}" children為子集名稱，hasChildren 通過指定 row 中的 hasChildren字段來指定哪些行是包含子節點。

列表重新加載時，所有節點重置狀態為收起，代碼如下：

// 重置列表關閉
        resetdata() {
            //重置的時候 讓數據全部收起
            this.forArr(this.deductList, false);
            this.getItemListData();
        },
        //列表展開和收起
        forArr(arr, isExpand) {
            arr.forEach(i => {
                this.$refs.theTable.toggleRowExpansion(i, isExpand);
                if (i.itemList) {
                    this.forArr(i.itemList, isExpand);
                }
            });
        },

以上就可以了。