使用vant的地域控件追加全部选项

在项目中使用了vant的Area插件,需要进行全部匹配,vant本身没有实现,需要改造代码,方法如下:

<div class="site">
 <span class>起点</span>
 <van-cell v-model="start" @click="areaSelect(0)"></van-cell>
</div>
<div class="site">
 <span>终点</span>
 <van-cell v-model="end" @click="areaSelect(1)"></van-cell>
</div>
<van-popup v-model="show" position="bottom">
 <van-area :area-list="areaList" @cancel="onCancel" @confirm="onConfirm" @change="change" ref="area" />
</van-popup>

vue的methos中添加下面两个方法:

change(picker, value, index){
  if(value[0].code != 100000){

  if(index == 0){
   let addr = this.areaList;
   let areaListCode = value[0].code;
   let code1 = Object.assign({},addr.city_list,{[areaListCode]:"全部"});
   let code2 = Object.assign({},addr.county_list,{[areaListCode]:"全部"});
   this.areaList.city_list = code1;
   this.areaList.county_list = code2;
  }
  if (index == 1) {
   let addr = this.areaList;
   let areaListCode = value[1].code;
   let code = Object.assign({},addr.county_list,{[areaListCode]: "全部"});
   this.areaList.county_list = code;
  }
  }
 },
 areaSelect(type) {
  let addr = this.areaList;
  this.PickerType = type;
  this.show = true;
  if(this.PickerType == 1 && this.endAddrInfo == "请选择"){
   this.$refs.area.reset();
  };
  let province_list = Object.assign({},addr.province_list,{100000:"全部"});
  let city_list = Object.assign({},addr.city_list,{100100:"全部"});
  let county_list = Object.assign({},addr.county_list ,{100101:"全部"});
  this.areaList={
  province_list,city_list,county_list
  };
 },

补充知识:使用vant中的Area 省市区选择和Area控件如果没有选中第三级的话就选不到当前值

今天要使用Area选择器在网上查了很多方法一直都无法让他隐藏再弹出来今天我就写下我的心得

效果图如下:

Area组件一般都是配合van-cell使用的

1,在加载页面的时候我让show为false

然后在点击了van-cell组件之后调用areaSelect方法把show变为true就能显示

然后还有就是如要要有联动效果一定要在给个初始值,这个的作用就是你点击area控件之后弹出控件就算不选址直接点击确定也可以有默认值

在者就是要想取的值一定要给onChange写成这样,不然的话,如果你没有触发第三级(就是区县的话)就不会刷新就是还是上一个选中的区县的值,刚开始我是写成这样

错误的:

正确的:

以上这篇使用vant的地域控件追加全部选项就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue 公共列表选择组件,引用Vant-UI的样式方式

    此组件用于公共选择组件.引用Vant UI 作为样式 特性: 1.支持动态.静态数据源. 2.支持分页加载. 3.支持模糊搜索. 4.支持单选.多选. 组件源码: <template> <div class="gn-PubSelect"> <van-action-sheet v-model="inShow"> <div class="gn-PubSelect-main" :style="{'he

  • 微信小程序使用Vant Weapp组件库的方法步骤

    地址:https://youzan.github.io/vant/#/zh-CN/intro 一.引入Vant组件库 1.首先运行 npm init 就会生成 package.json 2.运行 npm i vant-weapp -S --production 3.安装成功后 点击 工具 => 构建npm 之后点击 详情 => 使用构建npm 渲染 二.使用组件库 首先在json文件中引入组件 "van-button": "vant-weapp/button&qu

  • 在微信小程序中使用vant的方法

    在微信小程序中如何使用vant UI ,最近在开发小程序项目的时候遇到了这个问题, 去网上百度发现大家给的步骤普遍都是直接npm i vant-weapp -S --production,接着构建npm, 然而,我在尝试的时候发现,构建npm的时候一直失败,告诉我找不到node_moudules ???? 你们是不是也遇到了这种问题呢? 好的,接下来就让我来告诉大家真正的解决方案吧! 首先, 你需要在小程序根目录下打开命令窗口,依次输入以下命令 npm init 初始化 npm install

  • 详解如何在微信小程序开发中正确的使用vant ui组件

    微信小程序终于可以支持npm导入第三方库了(https://developers.weixin.qq....),但是这种导入模式和使用模式有别于我们使用的npm调用.今天我按照有赞新出的vant小程序ui库来讲解如何导入npm资源. 第一步: 在小程序工程的根目录下执行: npm i vant-weapp -S --production 第二步: 保证当前你的微信开发者工具是最新版本,然后点击执行"构建npm" 构建成功后会提示: 同时项目根目录中会多出一个目录"minipr

  • 使用vant的地域控件追加全部选项

    在项目中使用了vant的Area插件,需要进行全部匹配,vant本身没有实现,需要改造代码,方法如下: <div class="site"> <span class>起点</span> <van-cell v-model="start" @click="areaSelect(0)"></van-cell> </div> <div class="site&quo

  • PyQt5高级界面控件之QTableWidget的具体使用方法

    前言 QTableWidget是Qt程序中常用的显示数据表格的控件,类似于c#中的DataGrid.QTableWidget是QTableView的子类,它使用标准的数据模型,并且其单元数据是通过QTableWidgetItem对象来实现的,使用QTableWidget时就需要QTableWidgetItem.用来表示表格中的一个单元格,整个表格就是用各个单元格构建起来的 QTableWidget类中的常用方法 方法 描述 setROwCount(int row) 设置QTableWidget表

  • python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性

    QTableWidget介绍 QTableWidget是Qt程序中常用的显示数据表格的控件,类似于c#中的DataGrid.QTableWidget是QTableView的子类,它使用标准的数据模型,并且其单元数据是通过QTableWidgetItem对象来实现的,使用QTableWidget时就需要QTableWidgetItem.用来表示表格中的一个单元格,整个表格就是用各个单元格构建起来的 QTableWidget类中的常用方法 方法 描述 setROwCount(int row) 设置Q

  • python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法

    PyQt5窗口布局控件QStackedWidget介绍 QTackedWidget是一个堆栈窗口控件,可以填充一些小控件,但是同一时间只有一个小控件可以显示,QStackedWidget使用QStackedLayout布局.QSTackedWidget控件与QTabWidget类似,可以有效的显示窗口的控件 QStackedWidget的使用实例 import sys from PyQt5.QtGui import * from PyQt5.QtCore import * from PyQt5.

  • node-red教程之dashboard简介与输入型仪表板控件的使用

    目录 7.1 仪表板安装与介绍 7.1.1 仪表板的安装 7.1.2 检验安装结果 7.1.3 仪表板简介 7.2 常见的输入型仪表板控件应用 7.2.1 按钮button简介 7.2.2 使用按钮实现简易电话拨号界面 7.2.3 开关switch的使用 7.2.4 滑块slider的使用 7.2.5 输入框text input的使用 7.2.6 使用文本输入的取色功能为按钮设置颜色 7.2.7 下拉菜单dropdown的使用 Node-red基于JS,这是前端技术的“三驾马车”之一.前端技术主

  • JS获取页面input控件中所有text控件并追加样式属性

    如题,将使用jquery来在页面加载时获取页面input控件中所有text控件并添加样式. 以前写过的页面上所使用的text控件width属性太小需要改动,改动牵扯页面上所有text的属性,改动每个控件的width感觉会很麻烦,所以就想通过在页面加载的时候将要改动的text找到并添加属性. 首先先写了一个css样式: 复制代码 代码如下: .wid { width:205px; } 在页面加载中所写的代码如下: $("input[type=text]").addClass("

  • 在Vant的基础上封装下拉日期控件的代码示例

    需求分析 在实际项目中,表单里面的日期选择是常用的组件.Vant有提供日期组件,但是居然没有提供下拉形式的日期组件,不过该有的元件都有,就自己封装一个. 封装组件过程中我们要解决: 和表单的样式能兼容 错误提示 参数问题 事件机制 格式化 解决问题 就给新的组件取名为 VantFieldDate. 期望使用的时候是这样的 <vant-field-date label="发布时间" v-model="formData.publishDate" type=&quo

  • vant时间控件使用方法详解

    本文实例为大家分享了vant时间控件的使用方法,供大家参考,具体内容如下 代码: <template> <div class="shoukuan"> <!-- 头部公共搜索框 --> <tabbar title="添加团队活动"></tabbar> <div class="con"> <van-cell-group> <van-field v-model=&

  • iOS App中UIPickerView选择栏控件的使用实例解析

    UIPickerView控件是比UIDatePicker控件更普通的Picker控件,UIDatePicker控件可以理解成是从UIPickerView控件加工出来的专门进行日期选择的控件. UIPickerView控件的用法比UIDatePicker复杂一点.本文中的小例子将用UIPickerView控件做出两种效果,第一个只有一个转盘,第二个有两个转盘,但这两个转盘之间没有依赖关系,也就是说改变其中一个转盘中的选择,不会对第二个转盘产生影响.在下一篇文章会做一个转盘之间有依赖关系的例子. 下

  • Android动态添加设置布局与控件的方法

    本文实例讲述了Android动态添加设置布局与控件的方法.分享给大家供大家参考,具体如下: 有时候我们会在代码端,动态的设置,添加布局和控件.下面我们就看来看一下如何处理,直接上代码,代码里面的注解很清楚了. 布局文件:fragment_hot.xml 说明:这个部局,我用的是scrollView做为基础布局,主要是为了实现一个滚动.这里不多说,这个你可以使用任何布局都可以,这里的id我是提前定义的. 这里面的现在有的布局是我为了看到我在代码端,动态添加的代码,是否可以追加到现有布局的后面而加上

随机推荐