uView 2.x三级联动

这篇博客介绍了一个Vue项目中如何利用组件实现省市区三级联动选择的功能。通过监听change事件,根据选择的省和市动态更新区的选择列表。涉及到的数据包括省、市、区的json文件,通过引入静态js文件来获取数据。
摘要由CSDN通过智能技术生成
<u-picker 
	keyName="name"
	:show="show" 
	@cancel="show=false"
	ref="uPicker" 
	class="uPicker"
	:columns="columns" 
	@confirm="confirm" 
	@change="changeHandler"
	:defaultIndex="defaultarr"
>
						
 </u-picker>
import sheng from "@/static/common/js/sheng.js"
import shi from "@/static/common/js/shi.js"
import qu from "@/static/common/js/qu.js"
changeHandler(e) { //监听联动的操作
			    const {
			        columnIndex,
			        value,
			        values, // values为当前变化列的数组内容
			        indexs,
					picker = this.$refs.uPicker
			    } = e
				console.log(value)
				console.log(values)
				console.log(e)
				console.log(indexs)
			    if (columnIndex === 0) {
			        // picker为选择器this实例,变化第二列对应的选项
					// 注释 获取城市要有下标 
					// 而 一个对象的字符串 例:const aa ="1":[{name:"222"}] 
					// 获取需要 aaa["1"]对应 所以需要下面这样写
					// console.log(this.shi[value[0].code][indexs[1]].code)
					// console.log(this.shi[value[0].code][indexs[1]].code)
					picker.setColumnValues(1, this.shi[value[0].code])
					picker.setColumnValues(2,this.qu[this.shi[value[0].code][0].code])
			    }
				if (columnIndex === 1) {
					console.log(this.qu[this.shi[value[0].code][0].code])
					picker.setColumnValues(2,this.qu[this.shi[value[0].code][indexs[1]].code])
				}
			},

省市区地址json文件:https://gitee.com/gaohuazi/china_regions?_from=gitee_search

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
在uView2.x版本中,Picker组件的使用方式与1.x版本略有不同。下面是一个五选择器的示例代码: ```html <template> <view class="picker"> <picker :columns="columns" @change="onChange"></picker> </view> </template> <script> export default { data() { return { columns: [ { values: ['省份1', '省份2', '省份3'], defaultIndex: 0, onChange: (value, index) => { // 省份变化时更新城市列表 const cityValues = this.getCityList(index) this.$set(this.columns, 1, { values: cityValues, defaultIndex: 0 }) // 重置下选项 this.$set(this.columns, 2, { values: [], defaultIndex: 0 }) this.$set(this.columns, 3, { values: [], defaultIndex: 0 }) this.$set(this.columns, 4, { values: [], defaultIndex: 0 }) } }, { values: [], defaultIndex: 0, onChange: (value, index) => { // 城市变化时更新区县列表 const districtValues = this.getDistrictList(index) this.$set(this.columns, 2, { values: districtValues, defaultIndex: 0 }) // 重置下选项 this.$set(this.columns, 3, { values: [], defaultIndex: 0 }) this.$set(this.columns, 4, { values: [], defaultIndex: 0 }) } }, { values: [], defaultIndex: 0, onChange: (value, index) => { // 区县变化时更新街道列表 const streetValues = this.getStreetList(index) this.$set(this.columns, 3, { values: streetValues, defaultIndex: 0 }) // 重置下选项 this.$set(this.columns, 4, { values: [], defaultIndex: 0 }) } }, { values: [], defaultIndex: 0, onChange: (value, index) => { // 街道变化时更新村庄列表 const villageValues = this.getVillageList(index) this.$set(this.columns, 4, { values: villageValues, defaultIndex: 0 }) } }, { values: [], defaultIndex: 0 } ] } }, methods: { onChange(e) { // 用户选择最后一个选项时输出最终结果 if (e.detail.column === 4) { const province = this.columns[0].values[e.detail.value[0]] const city = this.columns[1].values[e.detail.value[1]] const district = this.columns[2].values[e.detail.value[2]] const street = this.columns[3].values[e.detail.value[3]] const village = this.columns[4].values[e.detail.value[4]] console.log(`${province}-${city}-${district}-${street}-${village}`) } }, getCityList(provinceIndex) { // 根据省份获取城市列表 // TODO: 根据实际需求替换为异步请求或本地数据 return ['城市1', '城市2', '城市3'] }, getDistrictList(cityIndex) { // 根据城市获取区县列表 // TODO: 根据实际需求替换为异步请求或本地数据 return ['区县1', '区县2', '区县3'] }, getStreetList(districtIndex) { // 根据区县获取街道列表 // TODO: 根据实际需求替换为异步请求或本地数据 return ['街道1', '街道2', '街道3'] }, getVillageList(streetIndex) { // 根据街道获取村庄列表 // TODO: 根据实际需求替换为异步请求或本地数据 return ['村庄1', '村庄2', '村庄3'] } }, mounted() { // 初始化省份列表 const provinceValues = this.columns[0].values this.columns[1].values = this.getCityList(0) // 初始化城市列表 const cityValues = this.columns[1].values this.columns[2].values = this.getDistrictList(0) // 初始化区县列表 const districtValues = this.columns[2].values this.columns[3].values = this.getStreetList(0) // 初始化街道列表 const streetValues = this.columns[3].values this.columns[4].values = this.getVillageList(0) } } </script> <style> .picker { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } </style> ``` 在上面的代码中,我们使用了一个Picker组件,并在其内部嵌套了多个列,对应省份、城市、区县、街道、村庄五个别。每当用户选择某个别的选项时,我们会根据该别的值更新下一个别的选项列表。当用户选择最后一个别时,我们会输出最终的选择结果。 注意,由于uView2.x版本的Picker组件使用的是小程序原生的picker-view组件,因此在更新列的值时需要使用`$set`方法。另外,由于Picker组件的默认值是根据各列的`defaultIndex`属性来确定的,因此在更新列的值时也需要更新默认值。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端代码の搬运工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值