在vue中使用vant TreeSelect分类选择组件操作


Posted in Javascript onNovember 02, 2020

中文文档:TreeSelect 分类选择

效果展示:

在vue中使用vant TreeSelect分类选择组件操作

//先在你需要的页面中引入,第一个是弹出层,第二个是选择的
 import { Popup } from "vant";
 import { TreeSelect } from "vant";

代码部分:

<van-popup v-model="policeShow" position="top" :overlay="true">
  <van-tree-select
  :items="items"
  :active-id.sync="items.activeId"
  :main-active-index.sync="items.activeId"
  @click-nav="onNavClick" 
  >
  <template slot="content" >
   <ul class="right-content">
   <li v-for="(item,index) in policeList" :key="index"  :class="{active:policeCode==item.policeCode}" @click="onItemClick(item.policeName,item.policeCode)"> {{item.policeName}} </li>
   </ul>
  </template>
  </van-tree-select>
  <div class="btn" @click="onPoliceClick">完成</div>
 </van-popup>

现在我来解析我的业务逻辑,希望对你能有帮助:

1.首先:items,是个数组,我们需要给它传个数组过去,用来展示左侧的数据

//这是我的后台传过来的数据,我将这个数据加到items里面去,左侧的数据将就展示出来了,注意这里是循环的数据,我为了简单这么写了,还有items中的key尽量用text,要不会渲染不上,在picker上面是有个value-key去改变的,这一会儿在下一篇文章中讲
{
 "code": 200,
 "message": "success",
 "data": [
  {
   "substationCode": "1101010000",
   "substationName": "东城区分局"
  },
  {
   "substationCode": "100002",
   "substationName": "昌平区分局"
  },
  {
   "substationCode": "100003",
   "substationName": "海淀区分局"
  },
  {
   "substationCode": "100001003",
   "substationName": "海淀区分局"
  },
  {
   "substationCode": "1010101",
   "substationName": "昌平区分局"
  },
  {
   "substationCode": "1010101\t",
   "substationName": "111"
  },
  {
   "substationCode": "1000021",
   "substationName": "测试重复分局"
  },
  {
   "substationCode": "12223",
   "substationName": "河北分局"
  }
 ]
}
  this.items.push({
    activeId:substationCode,
    text:substationName
  })

2.我们要根据左侧的数据去渲染右侧的数据(右侧的数据是自定义的,所以你自己加事件就行)

@click-nav代码部分已经写了
 onNavClick(index) {
  console.log(index) 
  let substationCode = this.items[index].activeId //这是我们通过index获取到当前点击的值
  this.requestPoliceList(substationCode) //这是请求右侧列表的请求通过activeId去请求。
 },

总结:

1.渲染左侧,将后台给你的值push到items里面(注意只能使用text)

2.通过@click-nav获取当前的index并拿到id

3.通过id渲染右侧的数据

补充知识:vue-treeselect的自定义部分说明和使用心得

在vue中出现了各种各样的框架,vue-treeselect就是vue的树选择;就是基于vue的多选组件

在平常的情况下一般我把vue-treeselect再次封装一遍为自己业务提供便利

当然它的功能还是有很多的例如:单选、多选、模糊搜索、清除等等

不说废话了直接看代码吧

在vue中使用vant TreeSelect分类选择组件操作

咱们来一个一个说明一下吧

首先命名一个树的名字,到时候组件调用的时候好调用也就是name

之后是透传的参数和数据配置props组件肯定是子的嘛,props中的东西都是可以从父级里面透传过来的

template就是我所需要的的vue-treeselect的组件模板

data就是我子组件的数据参数

当然在这个TgElTreeSelect你还可以放入methods、vue中的生命周期、计算属性、侦听器等等

props中的透传的参数

在vue中使用vant TreeSelect分类选择组件操作

props里面可以有数据value也就是初始化的数据,dataList就是你的接口数据,接下来的就是你选择之后渲染的属性和上传的属性了,说的直白一点就是下拉中的label和value当然上面对应的就是我的labelField和selectField,之后的属性就是树形折叠属性,

defaultExpandLevel就是从哪一级来时折叠展开,

defaultExpandAll就是全部展开或者折叠

multiple是否为多选

disabled这个就是可选择与不可选择

validateEvent验证必填与不必填的属性

clearable是否有清除的属性

当然我也把我完整的代码粘出来

在vue中使用vant TreeSelect分类选择组件操作

在vue中使用vant TreeSelect分类选择组件操作

在vue中使用vant TreeSelect分类选择组件操作

当然给一个说明呗在这里我使用了requirejs通过define的属性也就是所谓的AMD来再次封装这个组件,首页先npm安装vue-treeselect

npm install --save @riophae/vue-treeselect

Vue.component('treeselect', VueTreeselect.Treeselect)

上面的这句代码就是下载完之后引入treeselect

当然官网上的更全面详细的可以看看官网的再研究研究

以上这篇在vue中使用vant TreeSelect分类选择组件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
javascript实现雪花飘落效果
Aug 19 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 Javascript
vant自定义二级菜单操作
Nov 02 #Javascript
JavaScript动态生成表格的示例
Nov 02 #Javascript
JavaScript实现图片放大预览效果
Nov 02 #Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 #Javascript
在antd4.0中Form使用initialValue操作
Nov 02 #Javascript
vue+iview使用树形控件的具体使用
Nov 02 #Javascript
在antd Form表单中select设置初始值操作
Nov 02 #Javascript
You might like
解决中英文字符串长度问题函数
2007/01/16 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
php备份数据库类分享
2015/04/14 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
python集合类型用法分析
2015/04/08 Python
Python3实现购物车功能
2018/04/18 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
python简单验证码识别的实现方法
2019/05/10 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
python列表推导式入门学习解析
2019/12/02 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
领导检查欢迎词
2014/01/14 职场文书
结婚保证书范文
2014/04/29 职场文书
员工薪酬激励方案
2014/06/13 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
预备党员半年考察意见
2015/06/01 职场文书
导游词之井冈山
2019/11/20 职场文书
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记