vue-treeselect 是一个多选组件,具有对 Vue.js嵌套选项支持。
- 支持嵌套选项的单选和多选
- 模糊匹配
- 异步搜索
- 延迟加载(仅在需要时加载深度选项的数据)
- 键盘支持(使用Arrow Up & Arrow Down键导航,使用键选择选项Enter等)
- 丰富的选项和高度可定制的
- 支持 多种浏览器
下面看下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,
3:需要在页面中写入
<div class="search_row_label">单位管理范围:</div>
<div class="search_row_content">
<treeselect
noresultsText="暂无结果"
v-model="dwgxfw"
clearValueText="删除" //“×”按钮的标题
:searchable="false" //是否启用搜索功能
:options="szxzList" //选项数据
:load-options="loadOptions" //用于动态加载选项
placeholder="请选择"
@select="changeSelect" //选择一个选项后发出用于选择
@input="inputChange" //输入框值更改后发出触发
>
</treeselect>
4:这里举例实际应用
首先需要先获取到父节点的值
getParentLocalityName(){
this.getRequest(this.Jurisdiction,"").then(res=>{
// this.Loadding = false;
//这里先判断状态
if(res.data.state==1){
let resData = res.data.data
let 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,callback}){
//这里有三个参数
action 获取到的值
parentNode 加载子选项时显示
callback 接受error参数的函数
console.log(parentNode)
let params={
parentLocCode: parentNode.id
}
this.getRequest(this.Jurisdiction,urlPath(params)).then(res=>{
if(res.data.state==1){
if(res.data.data.length>0){
let resData =res.data.data
let arr = [] //定义空数组
resData.forEach(item=>{
let objData={}
objData.id = item.localitycode;
objData.label = item.localityname;
objData.name = item.localitydesc;
console.log(item.localitylevel)
if (item.localitylevel <=item.localitylevel+1) { //这里选择需要获取几个子节点进行判断
objData.children = null
objData.loading=false;
}
arr.push(objData) //将获取的数据代入
})
parentNode.children = arr;
callback();
}
}
})
},i){
console.log(n)
if (n.label == "长江流域") {
this.dwgxfw = "";
} else {
console.log(222)
this.dwgxfw = n.label;
this.dwglcode = n.id
}
},i) {
if (n == undefined) {
this.dwgxfw = "";
}
},
6:实际的效果图
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。