这篇文章主要是两个部分，一个是uniapp实现的省市区联动，一个是elementUI里面的Cascader 级联选择器实现的

文章目录

• 数据格式
• 一、uniapp实现省市区选择联动
• • 1.导入插件
  • 2.页面里面使用
  • 3.修改插件里面的代码，用于我们需要的数据
  • 4.完整的插件代码
• 二、vue-elementUI实现省市区选择联动
• • 1.使用讲解
• 总结

数据格式

下面是后台接口地址列表返回的数据格式
这是省的数据格式

这是市的数据格式

这是区、镇的数据格式

简单来说就是这样，需要嵌套结构，这样才能用到本篇文字的选择

province:[{city:[{district:[{}]}]}],

提示：以下是本篇文章正文内容，下面案例可供参考

一、uniapp实现省市区选择联动

1.导入插件

先在uniapp插件市场里面引入地址的插件，我用的这个pickerAddress，感谢这位大佬的插件

2.页面里面使用

1.先在script标签里面引入刚才下载好的插件

import pickerAddress from '@/components/common/Address/pickerAddress.vue'

2.注册插件

components: {pickerAddress
},

3.data里面定义一个变量，用来存储选择器选择之后显示的数据

data () {return {selectaddress: '点击选择',}
}

4.HTML里面使用选择地址的插件

<pickerAddress @change="changeAddress">{{ selectaddress }}</pickerAddress>

5.method里面获取选择的数据（这里面接收的data就是选择的数据）

changeAddress (data) {console.log(data)this.selectaddress = data.data.join('')	// 这段就是显示我们选择省市区的文字信息
},

3.修改插件里面的代码，用于我们需要的数据

1.template里面的内容

<picker @change="bindPickerChange"@columnchange="columnchange":range="array" range-key="name":value="value"mode="multiSelector"><slot></slot></picker>

2.定义选择的地址名称

let selectVal = ['', '', '']

3.data里面的变量

  data () {return {value: [0, 0, 0],array: [],index: 0,allAddressArray: [],selectAddressId: {province_id: '',city_id: '',district_id: '',}}}

4.created 初始化时调用的方法

created () {this.initSelect()},

5.method方法

methods: {// 初始化地址选项initSelect () {this.getAllAddress()},// 地址控件改变控件columnchange (d) {this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引.updateSourceDate() // 更新源数据.updateAddressDate() // 更新结果数据.$forceUpdate()  // 触发双向绑定},getAllAddress () {// 这里就是根据接口返回的数据，保存到allAddressArray 变量里面，然后调用this.updateSourceDate这个方法，一定要修改成自己项目调用接口的方法this.$R.get(getAllAddressUrl).then(res => {this.allAddressArray = res.data.provincethis.updateSourceDate()})},/*** 更新源数据* */updateSourceDate () {this.array = []this.array[0] = this.allAddressArray.map(obj => {return {name: obj.name,id: obj.id  // 就是这里新增选择的id，因为后台要的参数一般都是id}})// 这里的this.allAddressArray[this.value[0]].city里面的【city】就是根据自己参数修改对应的字段this.array[1] = this.allAddressArray[this.value[0]].city.map(obj => {return {name: obj.name,id: obj.id  // 就是这里新增选择的id，因为后台要的参数一般都是id}})// 这里的this.array[2] = this.allAddressArray[this.value[0]].city[this.value[1]].district里面的【city】和【district】就是根据自己参数修改对应的字段this.array[2] = this.allAddressArray[this.value[0]].city[this.value[1]].district.map(obj => {return {name: obj.name,id: obj.id  // 就是这里新增选择的id，因为后台要的参数一般都是id}})return this},/*** 更新索引* */updateSelectIndex (column, value) {let arr = JSON.parse(JSON.stringify(this.value))arr[column] = valueif (column === 0) {arr[1] = 0arr[2] = 0}if (column === 1) {arr[2] = 0}this.value = arrreturn this},/*** 更新结果数据* */updateAddressDate () {selectVal[0] = this.array[0][this.value[0]].nameselectVal[1] = this.array[1][this.value[1]].nameselectVal[2] = this.array[2][this.value[2]].name// 这里存起来省市区的idthis.selectAddressId.province_id = this.array[0][this.value[0]].idthis.selectAddressId.city_id = this.array[1][this.value[1]].idthis.selectAddressId.district_id = this.array[2][this.value[2]].idreturn this},/*** 点击确定* */bindPickerChange (e) {this.$emit('change', {// 传递参数的时候把选择的id也传过去selcecId: this.selectAddressId,index: this.value,data: selectVal})return this}}

4.完整的插件代码

<template><picker @change="bindPickerChange"@columnchange="columnchange":range="array" range-key="name":value="value"mode="multiSelector"><slot></slot></picker>
</template><script>
import { getAllAddressUrl } from '@/api/index'let selectVal = ['', '', '']export default {data () {return {value: [0, 0, 0],array: [],index: 0,allAddressArray: [],selectAddressId: {province_id: '',city_id: '',district_id: '',}}},created () {this.initSelect()},methods: {// 初始化地址选项initSelect () {this.getAllAddress()},// 地址控件改变控件columnchange (d) {this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引.updateSourceDate() // 更新源数据.updateAddressDate() // 更新结果数据.$forceUpdate()  // 触发双向绑定},getAllAddress () {// 这里就是根据接口返回的数据，保存到allAddressArray 变量里面，然后调用this.updateSourceDate这个方法，一定要修改成自己项目调用接口的方法this.$R.get(getAllAddressUrl).then(res => {this.allAddressArray = res.data.provincethis.updateSourceDate()})},/*** 更新源数据* */updateSourceDate () {this.array = []this.array[0] = this.allAddressArray.map(obj => {return {name: obj.name,id: obj.id  // 就是这里新增选择的id，因为后台要的参数一般都是id}})// 这里的this.allAddressArray[this.value[0]].city里面的【city】就是根据自己参数修改对应的字段this.array[1] = this.allAddressArray[this.value[0]].city.map(obj => {return {name: obj.name,id: obj.id  // 就是这里新增选择的id，因为后台要的参数一般都是id}})// 这里的this.array[2] = this.allAddressArray[this.value[0]].city[this.value[1]].district里面的【city】和【district】就是根据自己参数修改对应的字段this.array[2] = this.allAddressArray[this.value[0]].city[this.value[1]].district.map(obj => {return {name: obj.name,id: obj.id  // 就是这里新增选择的id，因为后台要的参数一般都是id}})return this},/*** 更新索引* */updateSelectIndex (column, value) {let arr = JSON.parse(JSON.stringify(this.value))arr[column] = valueif (column === 0) {arr[1] = 0arr[2] = 0}if (column === 1) {arr[2] = 0}this.value = arrreturn this},/*** 更新结果数据* */updateAddressDate () {selectVal[0] = this.array[0][this.value[0]].nameselectVal[1] = this.array[1][this.value[1]].nameselectVal[2] = this.array[2][this.value[2]].name// 这里存起来省市区的idthis.selectAddressId.province_id = this.array[0][this.value[0]].idthis.selectAddressId.city_id = this.array[1][this.value[1]].idthis.selectAddressId.district_id = this.array[2][this.value[2]].idreturn this},/*** 点击确定* */bindPickerChange (e) {this.$emit('change', {// 传递参数的时候把选择的id也传过去selcecId: this.selectAddressId,index: this.value,data: selectVal})return this}}
}

二、vue-elementUI实现省市区选择联动

1.使用讲解

1.HTML部分

<el-cascaderv-model="addressForm.area":options="areaCascaderList":props="areaCascaderProps":placeholder="addressForm.province === ''? '请选择地址': addressForm.province+' / '+addressForm.city+' / '+addressForm.district"clearable@change="areaCascaderHandleChange">
</el-cascader>

2.data

data () {return {addressForm: {area:'',province: '',city: '',district: '',},// 地址级联选择器配置areaCascaderProps: {expandTrigger: 'hover',children: 'district',label: 'name',value: 'id'},// 地址列表areaCascaderList: [],// 修改保存下来的地址idareaCascaderSelectId: []}},

3.method部分

// 调用接口返回省市区地址（这个记得要根据自己的接口修改）
async getAreaList () {const { data: res } = await this.$http.get(getAllAddressUrl)if (res.code !== 200) return this.$message.error(res.msg)console.log(res)// 统一级联选择器（这一步是为了统一级联选择器的children，可以看看上面接口返回的数据）res.data.province.forEach(item => {item.district = item.city})this.areaCascaderList = res.data.province},// 修改省市区地址级联选择器（这里面保存的就是你选择级联选择器之后的id了）areaCascaderHandleChange (value) {this.areaCascaderSelectId = value},

总结

这篇文章基本上就是这样了，本来只想写一下uniapp实现省市区选择联动，但是考虑到PC端也要用到也顺手写了一下，因为用elementUI级联选择器还是比较简单的，所以没写那么详细，要是有问题欢迎评论留言或者私信，我看到之后会及时进行解答的，要是这篇文章对你有所帮助，希望能够点个赞，谢谢

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！