Element-ui Table tree 结构使用（解决无展开箭头）

2021-12-14 10:01:10 阅读：331 来源： 互联网

标签：name 普陀区王小虎 tree Element ui address 2016 id

这两天在写后台管理的页面，需要使用到 Table ，而且会有下级。就想到了使用 Element table tree 结构。

使用过程中，一直不显示展开箭头，摸索调试了大半天，在这里特别记录下。

在 Table 基础上使用是比较简单的，直接加上几个对应的属性绑定就可以，代码如下：

    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border>
      <el-table-column prop="date" label="日期" sortable width="180" />
      <el-table-column prop="name" label="姓名" sortable width="180" />
      <el-table-column prop="address" label="地址" />
    </el-table>

export default {
  data() {
    return {
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        children: [{
          id: 31,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          id: 32,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }]
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}

上面这个是正常的使用。

官方示例中，有：:tree-props="{children: 'children', hasChildren: 'hasChildren'}" 绑定的属性。

所以下面几点

注意：

1. 必须有 row-key="id"，否则不会显示展开箭头；

2. tree-props 中的 children 可以映射为自己数据中的字段，如果一致都可以省略

3. 不是懒加载情况下，不需要 hasChildren（绑定的 table 数据中不能有，否则不能显示）【我自己就栽在这一条】

4. 不是懒加载下，children 字段一致， tree-props 可以省略，只需要 row-key 即可

Table 源码：

从源码中看，treeProps 是有默认值的，一样时不用传，rowKey 没有所以一定需要传。

标签：name,普陀区,王小虎,tree,Element,ui,address,2016,id
来源： https://www.cnblogs.com/zhurong/p/15686438.html

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

ICode9

Element-ui Table tree 结构使用（解决无展开箭头）