element-ui表格table組件的樹形表格

支持樹類型的數據的顯示。當 row 中包含 children 字段時，被視為樹形數據。

渲染樹形數據時，必須要指定 row-key。

通過指定 row 中的 hasChildren 字段來指定哪些行是包含子節點。children 與 hasChildren 都可以通過 tree-props 配置。

注意：hasChildren屬性可以不需要

只需要設置row-key和tree-props即可實現樹形表格

代碼：

<el-table ref="multipleTable" :data="list" style="width: 100%" size="small" v-loading="listLoading" border
                row-key="id" :tree-props="{children: 'children'}" :indent="20">
        <el-table-column label="名稱" prop="name"></el-table-column>
        <el-table-column label="ID" v-if="false"></el-table-column>
        <el-table-column label="頁面路徑" prop="page"></el-table-column>
        <el-table-column label="路由" prop="path"></el-table-column>
        <el-table-column label="圖標" align="center" width="150">
          <template slot-scope="scope">
            <svg-icon v-if="scope.row.icon"  class="svg-icon-M2class" :icon-class="scope.row.icon"  />
          </template>
        </el-table-column>
        <el-table-column label="順序" align="center" prop="seq" width="100">
        </el-table-column>
        <el-table-column label="類型" prop="type" align="center" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.type==0">目錄</span>
            <span v-if="scope.row.type==1">菜單</span>
            <span v-if="scope.row.type==2">按鈕</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="editHandle(scope.row)" icon="el-icon-edit">修改
            </el-button>
            <el-button type="danger" size="mini" @click="deleteHandle(scope.row)" icon="el-icon-delete">刪除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

效果如下：