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

最新推荐文章于 2024-06-29 20:19:04 发布
最新推荐文章于 2024-06-29 20:19:04 发布
阅读量1.3w 收藏 1
点赞数
分类专栏： 12
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CHY1211601538/article/details/84899661
版权

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

在这里插入图片描述

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

在这里插入图片描述
1，在加载页面的时候我让show为false在这里插入图片描述
然后在点击了van-cell组件之后调用areaSelect方法把show变为true就能显示
在这里插入图片描述
在这里插入图片描述
然后还有就是如要要有联动效果一定要在给个初始值,这个的作用就是你点击area控件之后弹出控件就算不选址直接点击确定也可以有默认值

最低0.47元/天 解锁文章
CHY1211601538
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
vant 索引城市不对_Vant Area 省市区选择
weixin_34857730的博客
12-23 759
介绍省市区三级联动选择，通常与弹出层组件配合使用引入import Vue from 'vue';import { Area } from 'vant';Vue.use(Area);代码演示基础用法要初始化一个Area组件，你需要传入一个area-list属性，数据格式具体可看下面数据格式章节选中省市区如果想选中某个省市区，需要传入一个value属性，绑定对应的省市区code配置显示列可以通过c...
省市区三级联动数据 json vue iview vant ele antd
06-10
"label":"东城区", "pid":"35", "value":"379" }, { "children":[], "label":"西城区", "pid":"35", "value":"380" },]}]}
vant area 省市区列表数据数据源
03-05
vant官网中找不到关于area省市区选择的数据源，所以我这边整理成 json格式，以便下载使用。
Vant4官方文档阅读记录
最新发布
qq_43741689的博客
06-29 1989
阅读官方文档的记录，记录了vant的安装，基本使用，插件配置，局部和全局使用，一些高级用法，按需载入style，以及更改主题，自定义样式，还有官方给出的一些常见问题产生的原因和解决方法
vue3.0 cli vant 省市区选择器用不了问题。
Wi_future的博客
12-12 507
vue3.0 cli + vant + eslint 使用中会发现省市区选择器报错如下： 3:5 error Identifier 'province_list' is not in camel case @typescript-eslint/camelcase 40:5 error Identifier 'city_list' is not in camel case @typescript-eslint/camelcase 654:5 error Identifier '
vant-area value选中值
lishihaol的博客
04-24 333
vant-area value选中值
vant 复选，选中一个其他置灰不可选，取消后再次变成可复选
qq_35040085的博客
04-21 439
【代码】vant 复选，选中一个其他置灰不可选，取消后再次变成可复选。
基于vantUI实现移动端城市区域选择
m0_46577631的博客
05-17 779
移动端城市区域选择 组件使用 <template> <div> <div @click="show=true"> <div> <span>{{areaName}}</span> <van-icon name="arrow-down" /> </div>
vue vant Area组件使用详解
10-15
在 Vue Vant 中，`Area` 组件是一个用于选择省市区的组件，常用于地址选择等场景。这篇教程将详细介绍如何使用 `Area` 组件。 首先，由于官方提供的 `Area` 示例数据可能不全，我们需要引入自定义的 `areaList.js` ...
微信小程序 使用picker封装省市区三级联动实例代码
09-01
为了实现省市区三级联动的效果，我们需要对Picker进行封装，使得当用户在某一级选择时，下一级的数据会相应更新。以下是封装省市区三级联动的具体步骤和涉及的知识点： 1. **使用Template模板语法**： 微信小程序...
使用vant的地域控件追加全部选项
01-21
在项目中使用了vant的Area插件，需要进行全部匹配，vant本身没有实现，需要改造代码，方法如下： 起点 (0)> 终点 (1)> <van-popup v-model=show positio
vue vant van-area实现地区联动省市区三级选择
总结前端开发中遇到的问题，分享前端知识
08-18 1968
van-area实现地区联动省市区三级选择
vant的picker组件自定义三级联动
Arbort
11-18 7624
任何组件都有自己的要求,按照要求来做,就没有问题;vant的picker组件一样,昨天接到一个需求,地址信息是一个三维数组(一维数组请参考上一篇文章);需要自己做联动,vant组件又要求values只能传string类型的数组,没办法,既然用了你的组件,你要什么类型的只能组给你了.具体看下面代码 <van-popup v-model="showPicker" position="bott...
vant Picker 移动端城市列表选择，未使用van-area
随心博客
11-23 1110
城市数据源使用的 vant，见github ：城市数据 也可以通过拿取 # 通过 npm npm i @vant/area-data # 通过 yarn yarn add @vant/area-data # 通过 pnpm pnpm add @vant/area-data h5: 通过弹窗的方法显示城市选择 <van-popup v-model:show="cityVisable" position="bottom"> <van-picker show-tool
小程序van-area省市区三级联动弹出列表
qq_41009420的博客
08-25 1006
1.将用到的area.js下载放入小程序utils文件夹中 2.在用到的页面引入area.js const area = require('../../utils/area.js') data: { areaList: Object.assign({}, area.default), } wxml <van-popup show="true" position="bottom" custom-style="height: 50%;" bind:clos
vant-weapp的Area 省市区选择组件无法显示
weixin_44236953的博客
03-10 4243
小程序vant Area省市区选择不显示
微信小程序使用Vant Weapp中的Area 省市区选择的使用以及遇到的坑总结
fangqi20170515的博客
03-14 1531
按照官方的教程，现在app.json引入组件下载Vant 官方提供的默认的省市区数据然后在xxxx.js文件引入并使用根据官方的教程操作，发现并没有什么用，还会出现如下报错：然后不管我怎么修改路径都会出现报错。
解决级联选择器中的3问题
mwm2378的博客
04-29 373
一.可以选择任意级别 template: <el-cascader :props="defaultProps"></el-cascader> JS->data defaultProps: { .... checkStrictly:true .... }, 二.隐藏选择器小圆圈问题 核心思路：通过css隐藏小圆圈，并扩大小圆圈的显示范围,然后设置visibility为hidden 如果不行的话再写一个.el-cascader-p
关于Vant组件库Area省市区使用相关问题
袁澧林的博客
11-30 1056
v-model 和 :v-model 的区别；Vant组件库；Area使用
使用vant-weapp的Area 省市区选择时 福建平潭的数据选不中
07-11
对于vant-weapp的Area组件，如果福建平潭的数据无法选择，可能是因为该组件默认加载的省市区数据不包含福建平潭的信息。您可以尝试以下几种解决方案： 1. 自定义数据源：您可以通过在Area组件中使用自定义的省市区...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值