vue treeselect 下拉框树tree插件 真实数据渲染

首先在项目中下载npm install --save @riophae/vue-treeselect
在要用的vue页面上

import Treeselectfrom ‘@riophae/vue-treeselect’

import ‘@riophae/vue-treeselect/dist/vue-treeselect.css’

加入到组件中

components: {Treeselect},

在template模板中
:defaultExpandLevel=“10” 默认展开几级树结构，我只有两级，所以默认展开两级
:normalizer="normalizer"是把数据按treeselect的格式过滤
:clearable=“false” 取消叉号

 <span><treeselect:defaultExpandLevel="2"@select="treeSelect"style="width: 80%":options="treeData":value="treeSelectvalue":normalizer="normalizer"placeholder="请选择单位":clearable="false"/></span>

data中定义 treeData

 treeData: [], //树的数据源

created中调用方法

  created() {this.getQsfirstuser();},

if (item.aid == 10000) {
item.childList = null
}
因为有个特殊要求，有一个指定项一级菜单不展示下面的二级，其他的正常展示。
找到一级菜单的id，让他的children子项数组为空（我这里的children实际叫childList ）

//获取树数据
getQsfirstuser() {getGzwSelectTree({ level: 2 }).then(res => {if (res && res.code === 0) {res.data.forEach(item => {if (item.aid == 10000) {item.childList = null}})this.treeData = res.datathis.treeSelectvalue = res.data[2].childList[4].id}})},

按treeselect的格式过滤数据，id、label和children的值换成node中对应的，先log打印一下node，找到对应的

 normalizer(node) {return {id: node.id,label: node.name,children: node.childList}},

如果加载数据后，下拉框的数据显示不完全，有被遮挡的情况，添加属性 :appendToBody=“true” 即可。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！