Vue實現(xiàn)省市區(qū)級聯(lián)下拉選擇框

更新時間：2022年03月04日 11:41:28 作者：theMuseCatcher

這篇文章主要為大家詳細介紹了Vue實現(xiàn)省市區(qū)級聯(lián)下拉選擇框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue實現(xiàn)省市區(qū)級聯(lián)下拉選擇框的具體代碼，供大家參考，具體內(nèi)容如下

以（Vue下拉選擇框Select組件二）為基礎(chǔ)實現(xiàn)省市區(qū)級聯(lián)下拉選擇框組件

（業(yè)務(wù)需要，固定省份選擇為貴州，沒有此業(yè)務(wù)，不傳disabled屬性即可）

效果圖如下：

①創(chuàng)建級聯(lián)下拉選擇Cascader.vue組件

<template>
? <div class="m-cascader-wrap">
? ? <Select
? ? ? class="mr10"
? ? ? :style="`z-index: ${zIndex};`"
? ? ? mode="region"
? ? ? :disabled="true"
? ? ? :selectData="provinceData"
? ? ? :selValue="address.province"
? ? ? :width="84"
? ? ? placeholder="請選擇省"
? ? ? @getValue="getProvinceCode" />
? ? <Select
? ? ? class="mr10"
? ? ? :style="`z-index: ${zIndex};`"
? ? ? mode="region"
? ? ? :selectData="cityData"
? ? ? :selValue="address.city"
? ? ? :width="172"
? ? ? placeholder="請選擇市"
? ? ? @getValue="getCityCode" />
? ? <Select
? ? ? mode="region"
? ? ? :style="`z-index: ${zIndex};`"
? ? ? :selectData="areaData"
? ? ? :selValue="address.area"
? ? ? :width="172"
? ? ? placeholder="請選擇區(qū)"
? ? ? @getValue="getAreaCode" />
? </div>
</template>
<script>
import Select from '@/components/Select'
import { dictByType } from '@/api/index'
export default {
? name: 'Cascader',
? components: {
? ? Select
? },
? props: {
? ? selectedAddress: { // 省市區(qū)初始值
? ? ? type: Object,
? ? ? default: () => {
? ? ? ? return {}
? ? ? }
? ? },
? ? zIndex: {
? ? ? type: Number,
? ? ? default: 1
? ? }
? },
? data () {
? ? return {
? ? ? provinceData: [
? ? ? ? {
? ? ? ? ? dictVal: '貴州省',
? ? ? ? ? dictKey: 'P29'
? ? ? ? }
? ? ? ],
? ? ? cityData: [],
? ? ? areaData: [],
? ? ? regionParams: {
? ? ? ? type: '1',
? ? ? ? parentDictKey: ''
? ? ? },
? ? ? address: {
? ? ? ? province: 'P29',
? ? ? ? city: this.selectedAddress.city || '',
? ? ? ? area: this.selectedAddress.area || ''
? ? ? },
? ? ? addressName: {
? ? ? ? provinceName: '貴州省',
? ? ? ? cityName: '',
? ? ? ? areaName: ''
? ? ? },
? ? ? initialCity: true
? ? }
? },
? created () {
? ? this.getCity('P29')
? ? console.log('address:', this.address)
? },
? methods: {
? ? getCity (key) { // 獲取市數(shù)據(jù)
? ? ? this.regionParams.parentDictKey = key
? ? ? dictByType(this.regionParams).then(res => {
? ? ? ? console.log('city-res:', res)
? ? ? ? if (res.message.code === 0) {
? ? ? ? ? if (res.data.dataList) {
? ? ? ? ? ? this.cityData = res.data.dataList
? ? ? ? ? ? if (this.initialCity && this.address.city) {
? ? ? ? ? ? ? this.initialCity = false
? ? ? ? ? ? ? this.cityData.forEach(item => {
? ? ? ? ? ? ? ? if (item.dictKey === this.address.city) {
? ? ? ? ? ? ? ? ? this.getArea(item.dictKey)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? ? ? console.log('cityData:', this.cityData)
? ? ? ? ? }
? ? ? ? }
? ? ? })
? ? },
? ? getArea (key) { // 獲取區(qū)數(shù)據(jù)
? ? ? this.regionParams.parentDictKey = key
? ? ? dictByType(this.regionParams).then(res => {
? ? ? ? console.log('area-res:', res)
? ? ? ? if (res.message.code === 0) {
? ? ? ? ? if (res.data.dataList) {
? ? ? ? ? ? this.areaData = res.data.dataList
? ? ? ? ? ? console.log('areaData:', this.areaData)
? ? ? ? ? }
? ? ? ? }
? ? ? })
? ? },
? ? getProvinceCode (name, key) {
? ? ? console.log('province:', name, key)
? ? },
? ? getCityCode (name, key) {
? ? ? console.log('city:', name, key)
? ? ? this.address.city = key
? ? ? this.addressName.cityName = name
? ? ? this.$emit('getAddress', {}, {})
? ? ? // 獲取區(qū)下拉列表
? ? ? this.getArea(key)
? ? },
? ? getAreaCode (name, key) {
? ? ? console.log('area:', name, key)
? ? ? this.address.area = key
? ? ? this.addressName.areaName = name
? ? ? this.$emit('getAddress', this.address, this.addressName)
? ? }
? }
}
</script>
<style lang="less" scoped>
.m-cascader-wrap {
? display: inline-block;
? width: 449px;
? height: 40px;
? line-height: 40px;
}
</style>

②在要使用的頁面引入：

<Cascader
? :selectedAddress="register"
? mode="region"
? :zIndex="997"
? @getAddress="getRegisterAddress" />
import Cascader from '@/components/Cascader'
components: {
? ? Cascader
},
data () {
? return {
? ? register: {
? ? ? province: this.data.registerProvinceCode,
? ? ? city: this.data.registerCityCode,
? ? ? area: this.data.registerAreaCode
? ? } || {},
? }
}
methods: {
? getRegisterAddress (address, addressName) {
? ? console.log('register-address:', address)
? ? this.register = address
? ? if (JSON.stringify(addressName) !== '{}') { // 用于提交表單
? ? ? this.addParams.registerProvinceName = addressName.provinceName
? ? ? this.addParams.registerCityName = addressName.cityName
? ? ? this.addParams.registerAreaName = addressName.areaName
? ? }
? ? if (JSON.stringify(address) !== '{}') { // 用于校驗下拉表單是否未選擇
? ? ? this.checkFocus('register')
? ? }
? }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: