vue项目中使用到三级联动,现在自己实现一个三级联动,仅供大家参考一下,直接上代码。
<template>
<el-form-item label="地址:">
<div style="display:flex;margin-bottom: -18px;">
<el-select v-model="ruleForm.address.country"
filterable
size="small"
style="width:160px;margin-right:10px"
@change="domesticClick">
<el-option v-for="item in country_list"
:key="item.value"
:label="item.name"
:value="item.name" />
</el-select>
<mFormAddressCommon v-if="!showCountryEnLive"
v-model="ruleForm.address"
:show-county="true"
style="width:100%;" />
</div>
</el-form-item>
</template>
<script>
import mFormAddressCommon from '@components/m-form/m-form-address-common.vue'
import country from '@assets/js/country'
import { mapActions, mapGetters } from 'vuex'
export default {
components: {
mFormAddressCommon,
},
data() {
return {
ruleForm: {
address: {
country: '中国大陆',
province: '',
city: '',
county: '',
details: '',
postcode: '',
},
},
country_list: country,
showCountryEnLive: false,
}
},
computed: {
...mapGetters({
user: 'getUserInfo',
group: 'getGroup',
}),
},
methods: {
domesticClick(row) {
console.log(row)
if (row != '中国大陆') {
this.showCountryEnLive = true
} else {
this.showCountryEnLive = false
}
},
},
}
</script>
mFormAddressCommon 组件代码
<template>
<div>
<el-row
type="flex"
justify="space-between"
>
<el-col>
<el-form-item prop="province">
<el-select
v-model="content.province"
size="small"
placeholder="省份"
@change="changeProvince"
>
<el-option
v-for="item in provinceArr"
:key="item.value"
:value="item.label"
>{{ item.label }}</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col>
<el-form-item prop="city" style="margin-left:10px">
<el-select
v-model="content.city"
size="small"
placeholder="城市"
@change="changeCity"
>
<el-option
v-for="item in citiesArr"
:key="item.value"
:value="item.label"
>{{ item.label }}</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col v-if="showCounty" style="margin-left:10px">
<el-form-item prop="county">
<el-select
v-model="content.county"
size="small"
placeholder="区县"
@change="changeCounty"
>
<el-option
v-for="item in countyArr"
:key="item.value"
:value="item.label"
>{{ item.label }}</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!-- <el-input type="text"
size="small"
v-model="content.details"
placeholder="请输入详细地址" /> -->
</div>
</template>
<script>
import { provinces } from '@/assets/js/provinces2'
export default {
name: 'MFormAddressCommon', // 选择省份城市(通用)
model: {
prop: 'content',
event: 'change'
},
props: {
content: {
type: Object,
default: {
province: '', // 省份
city: '', // 城市
county: '', // 区县
postcode: '',
details: '' // 详细
}
},
disabled: {
type: Boolean,
default: false
},
showCounty: {
type: Boolean,
default: false
}
},
data() {
return {
provinceArr: [],
citiesArr: [],
countyArr: []
}
},
created() {
this.provinceArr = provinces.data
},
mounted() {
setTimeout(() => {
if (this.content.province) {
this.changeProvinceInit(this.content.province)
}
if (this.content.city) {
this.changeCityInit(this.content.city)
}
}, 400)
},
methods: {
async changeProvinceInit(val) {
let item = null
this.provinceArr.forEach((c) => {
if (c.label === val) {
item = c
}
})
if (!item) return
this.citiesArr = item.children
this.countyArr = []
},
async changeCityInit(val) {
let item = null
this.citiesArr.forEach((c) => {
if (c.label === val) {
item = c
}
})
if (!item) return
this.countyArr = item.children || []
},
async changeProvince(val) {
let item = null
console.log('changeProvince', val)
console.log('changeProvince', this.provinceArr)
this.provinceArr.forEach((c) => {
if (c.label === val) {
item = c
}
})
if (!item) return
this.citiesArr = item.children
this.countyArr = []
this.content.city = ''
this.content.county = ''
this.content.postcode = ''
this.$emit('change', this.content)
},
async changeCity(val) {
let item = null
this.citiesArr.forEach((c) => {
if (c.label === val) {
item = c
}
})
if (!item) return
this.countyArr = item.children || []
this.content.county = ''
this.content.postcode = ''
this.$emit('change', this.content)
},
// async changeCounty() {
// this.$emit('change', this.content)
// }
async changeCounty(val) {
this.countyArr.forEach((c) => {
if (c.label === val) {
this.content.postcode = c.postCode
}
})
console.log(this.content, val)
this.$emit('change', this.content)
}
}
}
</script>
<style lang="scss" scoped>
</style>
以上内容仅供参考