vue-treeselect无法点击问题(点击无法出现拉下菜单) vue-treeselect无法点击问题(点击

vue-treeselect无法点击

问题原因
可正常点击
不能正常点击

vue-treeselect的基本一些用法

1.首先需要先安装
2.需要引入至vue页面使用
3.需要在页面中写入
4.这里举例实际应用
5.当点击时加载子数据
6.实际的效果图

vue-treeselect无法点击
问题原因
样式冲突（使用了elementui）
场景：在el-form标签中，如果使用了标签，并且父标签不是的话，就会出现无法点击的问题。（没有严格按elementui的标签嵌套）

可正常点击

不能正常点击

其他场景下，应该也是样式冲突的问题。

vue-treeselect的基本一些用法
1.首先需要先安装
@riophae/vue-treeselect":"^0.0.37
这是vue官方的中文文档可以参考 https://www.vue-treeselect.cn/#node

文章图片

2.需要引入至vue页面使用

import Treeselect from "@riophae/vue-treeselect"; import "@riophae/vue-treeselect/dist/vue-treeselect.css"; components: {Loadding,Treeselect,},

3.需要在页面中写入

单位管理范围：

【vue-treeselect无法点击问题(点击无法出现拉下菜单)】
4.这里举例实际应用
首先需要先获取到父节点的值

getParentLocalityName(){this.getRequest(this.Jurisdiction,"s_kj/s_kj_02/s_kj_02_01/loadDiscritctTreeRootNode","").then(res=>{// this.Loadding = false; //这里先判断状态if(res.data.state==1){let resData = https://www.it610.com/article/res.data.datalet objData = {}//定义一个空对象objData.id = resData.localitycode; objData.label = resData.localityname; objData.name = resData.localitydesc; objData.children = null; this.szxzList.push(objData)//在这里将获取到的数据代入console.log(this.szxzList)}else{this.Loadings = false; this.$Message.error(res.data.msg); }}).catch(error=>{this.Loadings = false; })

5.当点击时加载子数据

loadOptions({action,parentNode,callback}){//这里有三个参数action获取到的值parentNode加载子选项时显示callback接受error参数的函数console.log(parentNode)let params={parentLocCode: parentNode.id}this.getRequest(this.Jurisdiction,"s_kj/s_kj_02/s_kj_02_01/loadDiscrictTreeNode",urlPath(params)).then(res=>{if(res.data.state==1){if(res.data.data.length>0){let resData =https://www.it610.com/article/res.data.datalet arr = []//定义空数组resData.forEach(item=>{let objData=https://www.it610.com/article/{}objData.id = item.localitycode; objData.label = item.localityname; objData.name = item.localitydesc; console.log(item.localitylevel)if (item.localitylevel <=item.localitylevel+1) {//这里选择需要获取几个子节点进行判断objData.children = nullobjData.loading=false; }arr.push(objData)//将获取的数据代入})parentNode.children = arr; callback(); }}})},changeSelect(n,i){console.log(n)if (n.label =="长江流域") {this.dwgxfw = ""; } else {console.log(222)this.dwgxfw = n.label; this.dwglcode = n.id}},inputChange(n, i) {if (n == undefined) {this.dwgxfw = ""; }},

6.实际的效果图