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);
                }
            });
        },

以上就可以了。