在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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
php判断是否为json格式的方法
2014/03/04 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
python中验证码连通域分割的方法详解
2018/06/04 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
Numpy之reshape()使用详解
2019/12/26 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
pandas DataFrame运算的实现
2020/06/14 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
python中@contextmanager实例用法
2021/02/07 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
工程业务员工作职责
2013/12/07 职场文书
实习评语
2013/12/16 职场文书
个人求职信范文分享
2014/01/31 职场文书
经理任命书模板
2014/06/06 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python