【Uni-App】用 uView 组件库中的u-picker 实现地区的省-市-区三级联动确认回显

一：准备工作

组件的引入就不多赘述了直接看使用方法

二：json文件数据

地址我是引入的json文件数据结构大概是这个样子

例1

例2

三：先做个按钮做弹窗显示

做个动态style，控制是否高亮地址

<u-form-item label="地区" :border-bottom="false"><u-cell :border="false"><view slot="right-icon" @tap="showLocal = true"><text :style="{ color: local.length ? '#333' : '#c0c4cc' }">{{ local === '' ? '选择省/市/区' : local }}</text></view></u-cell></u-form-item>

四：使用组件

 <u-picker@cancel="showLocal = false"@close="showLocal = false":show="showLocal":columns="addressColumns"@confirm="localConfirm"title="请选择所在地"keyName="name"itemHeight="80"closeOnClickOverlayref="uPicker"@change="changeHandler":defaultIndex="defaultAddress"immediateChange></u-picker>

五：用到的变量

import areas from '@/utils/areas.json'//引入原始数据export default {data(){return {local: '', //区域localCode: '', //这个变量看个人需求使用showLocal: false,   //是否展示弹出层addressColumns: [], //数据数组defaultAddress: [],  //默认选中 (回填时或者初次显示默认选中)addressData: areas,  //原始数据 (引入的json文件)}}
}

六：初始化数据

   onShow() {//省的数组const provinceData = areas.map(e => {return { name: e.name, code: e.code }//这里可以直接return e.name  这里我是要用到code所以才用对象包起来的 下面的市 区 也一样})
//市的数组const cityData = areas.map(e => {const arr = []arr.push(e.areas.map(c => {return { name: c.name, code: c.code }}))return arr})
//区的数组const areaData = areas.map(e => {const arr = []arr.push(e.areas.map(c =>c.areas.map(d => {return { name: d.name, code: d.code }})))return arr})const arr = [provinceData, cityData[0][0], areaData[0][0][0]]this.addressColumns = arr    //将得到的3个数组 的第一个市的所有数据赋值 作为初始数据},

七：数据变更时的方法

 changeHandler(e) {//分别表示选中的列 , 该列的第几个,选中的3列的第几个的数组,组件本身const { columnIndex, index, indexs, picker = this.$refs.uPicker } = e//如果改变的是第一列if (columnIndex === 0) {const children1 = this.addressData[index].areas.map(e => {return { name: e.name, code: e.code }})picker.setColumnValues(1, children1)
//更换 第二列数据const children2 = this.addressData[index].areas[indexs[1]].areas.map(e => {return { name: e.name, code: e.code }})picker.setColumnValues(2, children2)
//更换 第三列数据}if (columnIndex === 1) {//如果改变的是第二列const children3 = this.addressData[indexs[0]].areas[indexs[1]].areas.map(e => {return { name: e.name, code: e.code }})picker.setColumnValues(2, children3)
//更换 第三列数据}},

八：点击确认时的方法

    localConfirm(e) {//显而易见 不多赘述this.local = `${e.value[0].name}-${e.value[1].name}-${e.value[2].name}`this.localCode = `${e.value[0].code}-${e.value[1].code}-${e.value[2].code}`this.showLocal = false},

九：数据的回填

//已经知道了 this.local ='省-市-区'初始弹窗时默认选中改值backfill(temp) {temp = item.area.split('-')let index,index1,index2 = 0let arr,arr1,arr2 = []
//匹配省市区对应每列的第几个this.addressData.forEach((item, i) => {if (item.name == temp[0]) {index = iitem.children.forEach((val, ind) => {if (val.name == temp[1]) {index1 = indval.children.forEach((e, n) => {if (e.name == temp[2]) {index2 = n}})}})}})arr = this.addressData.map(e => {return { name: e.name, code: e.code }})arr1 = this.addressData[index].children.map(e => {return { name: e.name, code: e.code }})arr2 = this.addressData[index].children[index1].children.map(e => {return { name: e.name, code: e.code }})
//反推出3列的数组数据this.addressColumns = [arr, arr1, arr2]
// 赋值给 默认初始选中 this.defaultAddress = [index, index1, index2]}

这是选中效果

这是其中的json文件

链接：https://pan.baidu.com/s/1_heSAGHJnTe-343fRmbOPA
提取码：hmky

如果失效了，可以联系我获取

【Uni-App】用 uView 组件库中的u-picker 实现地区的省-市-区三级联动确认回显相关推荐

uniapp 用 uView 组件库中的u-picker 实现地区的省-市-区三级联动
组件的引入就不多赘述了直接看使用方法地址我是引入的json文件数据结构大概是这个样子例1 例2 1,先做个按钮做弹窗显示 <u-cell :border="true" ...
uniapp - 全平台兼容的 “多图上传“ 功能，搭配 uview 组件库中的 upload 上传组件（附带详细的示例源码及注释，可直接复制使用或简单修改）
效果图使用 uniapp 开发,多平台全端兼容的多图上传功能,支持限制个数及移除等. 组件库使用的是 uview 框架,上传组件基于 Upload组件,功能完美无bug. 准备阶段 Upload组件 ...
vue中在当前组件中定义的全局变量怎么在methods中使用_Vue原理解析（十）：搞懂事件API原理及在组件库中的妙用...
在vue内部初始化时会为每个组件实例挂载一个this._events私有的空对象属性: vm._events = Object.create(null) // 没有__proto__属性这个里面存放 ...
axure日期选择器组件_Vue原理解析（十）：搞懂事件API原理及在组件库中的妙用
在vue内部初始化时会为每个组件实例挂载一个this._events私有的空对象属性: vm._events = Object.create(null) // 没有__proto__属性这个里面存放 ...
vue + element 顶部二级菜单_揭秘vue/react组件库中5个quot;作者不造的轮子quot;
点击上方"前端公虾米"关注最新前端资讯来源: 铁皮饭盒https://juejin.im/post/5d89cd156fb9a06acb3ee19e ? 这五个轮子其实是5个纯j ...
利用vantUI组件库中的Field 输入框、Cell 单元格完成金额数字框的数字转金额格式和金额大写
近期公司的任务需要这个功能,利用vantUI组件库中的Field 输入框.Cell 单元格完成金额数字框的数字转金额格式和金额大写 1.首先写工具类utils.js // 将数字转换成金额千字文格式显 ...
Henry前端笔记之 UI组件库中table与slot相关理解
Henry前端笔记之 UI组件库中table与slot相关理解作用域插槽: 解构赋值基础:https://developer.mozilla.org/zh-CN/docs/Web/JavaScrip ...
饿了么UI组件库中，Image组件预览图片错位的解决
使用过elementUI组件库中的Image组件基本都知道,其组件会自带一个图片预览功能,仅需要通过preview-src-list传入需要预览的图片url列表即可实现点击预览. 博主使用了此功能,进 ...
umi 解决找不到antd组件库中组件的路径问题 filePath not found of antd/es/float-button
一.问题常见的报错: @import '~antd/es/style/themes/default.less'; 在安装的依赖中找不到此时正在使用的antd组件库中的悬浮按钮组件二.解决方式我们 ...

【Uni-App】用 uView 组件库中的u-picker 实现地区的省-市-区三级联动确认回显

目录

一：准备工作

二：json文件数据

例1

例2

三：先做个按钮做弹窗显示

四：使用组件

五：用到的变量

六：初始化数据

七：数据变更时的方法

八：点击确认时的方法

九：数据的回填

这是选中效果

这是其中的json文件

【Uni-App】用 uView 组件库中的u-picker 实现地区的省-市-区三级联动确认回显相关推荐

最新文章

热门文章

【Uni-App】用 uView 组件库中的u-picker 实现地区的 省-市-区 三级联动确认回显

目录

一：准备工作

二：json文件数据

例1

例2

三：先做个按钮做弹窗显示

四：使用组件

五：用到的变量

六：初始化数据

七：数据变更时的方法

八：点击确认时的方法

九：数据的回填

这是选中效果

这是其中的json文件

【Uni-App】用 uView 组件库中的u-picker 实现地区的 省-市-区 三级联动确认回显相关推荐

最新文章

热门文章

【Uni-App】用 uView 组件库中的u-picker 实现地区的省-市-区三级联动确认回显

【Uni-App】用 uView 组件库中的u-picker 实现地区的省-市-区三级联动确认回显相关推荐