vue-treeselect的基本用法以及解决点击无法出现拉下菜单


Posted in Vue.js onApril 30, 2022

vue-treeselect无法点击

问题原因

样式冲突(使用了elementui)

场景:在el-form标签中,如果使用了标签,并且父标签不是的话,就会出现无法点击的问题。(没有严格按elementui的标签嵌套)

可正常点击

<el-row>
   <el-col :span="24"  v-if="form.parentId !== 0">
     <el-form-item   label="上级字典" prop="parentId">
       <treeselect v-model="parentId" :options="dictOptions"  />
     </el-form-item>
   </el-col>
 </el-row>

不能正常点击

<el-col :span="24" >
  <el-form-item   label="上级字典" prop="parentId">
    <treeselect v-model="parentId" :options="dictOptions"  />
  </el-form-item>
</el-col>

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

vue-treeselect的基本一些用法

1.首先需要先安装

@riophae/vue-treeselect":"^0.0.37

这是vue官方的中文文档可以参考 https://www.vue-treeselect.cn/#node

vue-treeselect的基本用法以及解决点击无法出现拉下菜单

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

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

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,"s_kj/s_kj_02/s_kj_02_01/loadDiscritctTreeRootNode","").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,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 =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();
          }
        }
      })
    },  
    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.实际的效果图

vue-treeselect的基本用法以及解决点击无法出现拉下菜单

Vue.js 相关文章推荐
vue+element实现动态加载表单
Dec 13 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 #Vue.js
Vue操作Storage本地化存储
Apr 29 #Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 #Vue.js
详解Vue3使用axios的配置教程
Apr 29 #Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 #Vue.js
vue里使用create, mounted调用方法
vue elementUI批量上传文件
Apr 26 #Vue.js
You might like
我的论坛源代码(五)
2006/10/09 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
PHP错误处理函数
2016/04/03 PHP
php while循环控制的简单实例
2016/05/30 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
js实现选项卡效果
2020/03/07 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
工程师自我评价怎么写
2013/09/19 职场文书
物业招聘计划书
2014/01/10 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
中学生班主任评语
2014/01/30 职场文书
租房协议书
2014/04/10 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
社区植树节活动总结
2015/02/06 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
学校标语口号大全
2015/12/26 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
QT与javascript交互数据的实现
2021/05/26 Javascript
mysql配置SSL证书登录的实现
2021/09/04 MySQL