在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 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
JavaScript this调用规则说明
Mar 08 Javascript
用JQUERY增删元素的代码
Feb 14 Javascript
document.forms用法示例介绍
Jun 26 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 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实现通过URL提取根域名
2016/03/31 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
详解python pandas 分组统计的方法
2019/07/30 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
网上商城创业计划书范文
2014/01/31 职场文书
土木工程求职信
2014/05/29 职场文书
保护水资源的标语
2014/06/17 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
高中班主任评语
2014/12/30 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python
MongoDB支持的索引类型
2022/04/11 MongoDB
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers