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!
原文始发于微信公众号（ssw在路上的蚂蚁）：VUE+Element实现树形结构
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/89631.html
