VUE+Element实现树形结构

VUE+Element实现树形结构

缘由

最近想做一个属性菜单结构的页面展示，我的前端使用的技术是VUE+Element。发现根据官网上的例子，名字怎么也展示不出来，其实是自己没有仔细看官网，特此记录下。

数据

先看下后台返回的数据及格式。

pid为0，则为1级菜单，二级菜单的pid为一级菜单的id。

前端代码

<el-tree
    :data="data"
    show-checkbox
    node-key="typeId"
    default-expand-all
    :expand-on-click-node="false">
  <span @click="click(data)" class="custom-tree-node" slot-scope="{ node, data }">
    <span>{{ node.name }}</span>
    <span>
      <el-button type="text" size="mini" @click="() => append(data)">添加</el-button>
      <el-button type="text" size="mini" @click="() => remove(node, data)">删除</el-button>
    </span>
  </span>
</el-tree>

展示效果：

好像对了，又好像不太对。我的类型名称都没展示，但是这个结构好像是对的，node.name的值没有展示。

解决

我是参考官网的这个例子做的，代码可以说一模一样的，还就是不展示名字。奇怪

以后还是要认真看文档，其实文档下面写的很清楚、很详细。

修改代码

在defaultProps中配置树菜单数据的key即可。

defaultProps: {
    children: "children",
    label: "name",
    isLeaf: "leaf",
}

大概是说，label实际使用的是我自己数据中的name列。

再次查看效果：

nice!