首页 > 其他分享> 文章详细

element-ui表格table组件的树形表格

2021-12-13 10:02:37 阅读：153 来源： 互联网

标签：表格 hasChildren element 树形 ui props children row

支持树类型的数据的显示。当 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>

效果如下：

标签：表格,hasChildren,element,树形,ui,props,children,row
来源： https://www.cnblogs.com/zwh0910/p/15681759.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

element-ui表格table组件的树形表格