在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插件
Nov 19 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
JavaScript canvas实现文字时钟
Jan 10 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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
基于PHP常用函数的用法详解
2013/05/10 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
python 实现绘制整齐的表格
2019/11/18 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
幼儿园中秋节活动方案
2014/02/06 职场文书
大学英语专业求职信
2014/06/21 职场文书
销售竞赛活动方案
2014/08/23 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
带你了解Java中的ForkJoin
2022/04/28 Java/Android
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS