欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)el-select組件的示例代碼

 更新時(shí)間:2023年02月20日 09:59:42   作者:chengqiuming  
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)el-select組件的方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的的可以參考一下

一 自定義組件

1 位置

2 代碼

<template>
  <div class="areaSelect flex">
    <!-- 省選擇框 -->
    <el-select
      filterable
      :disabled="disabled"
      v-model="province"
      :size="size"
      placeholder="省"
      @change="changeCode($event,0)">
      <el-option
        v-for="item in provinceList"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <!-- 市選擇框 -->
    <el-select
      filterable
      :disabled="disabled"
      class="center_select"
      v-model="city"
      placeholder="市"
      @change="changeCode($event,1)">
      <el-option
        v-for="item in cityList"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <!-- 區(qū)選擇框 -->
    <el-select
      filterable
      :disabled="disabled"
      v-model="area"
      placeholder="區(qū)"
      @change="changeCode($event,2)">
      <el-option
        v-for="item in areaList"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
<script>
  export default {
    name: 'regionSelect',
    props: {
      size: '',
      disabled: {
        size: String,
        type: Boolean,
        default: false
      },
      code: {
        type: Object,
        default: () => {
          return {
            areaCode: '',
            areaName: '',
            cityCode: '',
            cityName: '',
            provinceCode: '',
            provinceName: ''
          }
        }
      }
    },
    data () {
      return {
        province: '',
        city: '',
        area: '',
        provinceList: [],
        cityList: [],
        areaList: []
      }
    },
    watch: {
      code (val) {
        if (val.areaName && val.areaName !== '') {
          this.province = val.provinceCode
          this.city = val.cityCode
          this.area = val.areaCode
          this.provinceCity(val.provinceCode)
          this.cityArea(val.cityCode)
        } else {
          this.cityList = []
          this.areaList = []
        }
      }
    },
    mounted () {
      if (this.code.areaName && this.code.areaName !== '') {
        this.province = this.code.provinceCode
        this.city = this.code.cityCode
        this.area = this.code.areaCode
        this.provinceCity(this.code.provinceCode)
        this.cityArea(this.code.cityCode)
      }
      this.getProvince()
    },
    methods: {
      resetArea () {
        this.province = ''
        this.city = ''
        this.area = ''
      },
      // 當(dāng) type == 0 ,data 表示省編碼
      // 當(dāng) type == 1 ,data 表示市編碼
      changeCode (data, type) {
        if (type === 0) {
          this.city = ''
          this.area = ''
          this.provinceCity(data)
        }
        if (type === 1) {
          this.area = ''
          this.cityArea(data)
        }
        if (this.province !== '' && this.city !== '' && this.area !== '') {
          this.$emit(
            'code', [{
              code: this.province,
              name: this.provinceList.find(
                (val) => val.value === this.province
              ).label
            }, {
              code: this.city,
              name: this.cityList.find(
                (val) => val.value === this.city
              ).label
            }, {
              code: this.area,
              name: this.areaList.find(
                (val) => val.value === this.area
              ).label
            }]
          )
        }
      },
      // 從后臺(tái)獲得省數(shù)據(jù)列表
      async getProvince () {
        let result = []
        let url = '/base/division/provinceList'
        let data = await this.$http.get(url)
        data.data.data.map((item) => {
          result.push({
            label: item.name,
            value: item.code
          })
        })
        this.provinceList = result
      },
      // 依據(jù)省編碼獲得市數(shù)據(jù)列表
      async provinceCity (code) {
        let result = []
        let url = '/base/division/cityList'
        let data = await this.$http({
          url: url,
          method: 'get',
          params: {
            provinceCode: code
          }
        })
 
 
        data.data.data.map((item) => {
          result.push({
            label: item.name,
            value: item.code
          })
        })
        this.cityList = result
      },
      // 依據(jù)市編碼獲得區(qū)數(shù)據(jù)列表
      async cityArea (code) {
        let url = '/base/division/districtList'
        let data = await this.$http({
          url: url,
          method: 'get',
          params: {
            cityCode: code
          }
        })
        let result = []
        data.data.data.map((item) => {
          result.push({
            label: item.name,
            value: item.code
          })
        })
        this.areaList = result
      }
    }
  }
</script>
<style>
  .center_select {
    margin: 0 10px;
  }
 
 
  .global_form .areaSelect {
    width: 70%;
  }
 
 
  .global_form .areaSelect .el-select {
    width: 33.33%;
  }
</style>

二 main.js 配置

// 行政區(qū)劃三級(jí)選擇
import RegionSelect from './components/regionSelect'
// 行政區(qū)劃三級(jí)選擇
Vue.use(RegionSelect)
// 行政區(qū)劃三級(jí)選擇
Vue.component('regionSelect', RegionSelect)

三 使用方法

1 結(jié)構(gòu)部分

<regionSelect
  :code="item.value"
  :disabled="item.disabled"
  :size="layout.size"
  @code="changeCode($event,item.prop)"
  v-if="item.type==='region'"
  ref="selectArea"
></regionSelect>

2 代碼部分

searchForm: {
  province: '', // 省
  city: '', // 市
  district: '' // 區(qū)
},
item: { // 省市區(qū) select 自定義組件傳參部分
  value: '',
  type: 'region',
  disabled: false
},
layout: { // 選擇框樣式,用于傳參
  size: ''
},

3 樣式部分

// 省市區(qū)選擇框改變時(shí),傳遞出來(lái)已選擇的值
changeCode (data, prop) {
  this.searchForm.province = data[0].name
  this.searchForm.city = data[1].name
  this.searchForm.district = data[2].name
},
// 重置選擇框
resetForm () {
  this.$refs.selectArea[0].resetArea()  // 清除省市區(qū)
}

四 測(cè)試

1 級(jí)聯(lián)選擇

2 觀察數(shù)據(jù)

到此這篇關(guān)于Vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)el-select組件的示例代碼的文章就介紹到這了,更多相關(guān)Vue省市區(qū)三級(jí)聯(lián)動(dòng)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 解決父子組件通信的三種Vue插槽

    解決父子組件通信的三種Vue插槽

    這篇文章主要為大家介紹了Vue插槽解決父子組件通信,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2021-11-11
  • vue實(shí)現(xiàn)視頻上傳功能

    vue實(shí)現(xiàn)視頻上傳功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)視頻上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-04-04
  • antd 表格列寬自適應(yīng)方法以及錯(cuò)誤處理操作

    antd 表格列寬自適應(yīng)方法以及錯(cuò)誤處理操作

    這篇文章主要介紹了antd 表格列寬自適應(yīng)方法以及錯(cuò)誤處理操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-10-10
  • vue動(dòng)態(tài)禁用控件綁定disable的例子

    vue動(dòng)態(tài)禁用控件綁定disable的例子

    今天小編就為大家分享一篇vue動(dòng)態(tài)禁用控件綁定disable的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-10-10
  • 關(guān)于vue面試題匯總

    關(guān)于vue面試題匯總

    本文給大家收藏整理了關(guān)于vue面試題匯總的一些知識(shí),需要的朋友可以參考下
    2018-03-03
  • vue2中l(wèi)ess的安裝以及使用教程

    vue2中l(wèi)ess的安裝以及使用教程

    less是css預(yù)處理器,對(duì)原先css進(jìn)行了擴(kuò)展和補(bǔ)充,下面這篇文章主要給大家介紹了關(guān)于vue2中l(wèi)ess的安裝以及使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-12-12
  • Vue?3?中使用?vue-router?進(jìn)行導(dǎo)航與監(jiān)聽(tīng)路由變化的操作

    Vue?3?中使用?vue-router?進(jìn)行導(dǎo)航與監(jiān)聽(tīng)路由變化的操作

    在Vue3中,通過(guò)useRouter和useRoute可以方便地實(shí)現(xiàn)頁(yè)面導(dǎo)航和路由變化監(jiān)聽(tīng),useRouter允許進(jìn)行頁(yè)面跳轉(zhuǎn),而useRoute結(jié)合watch可以根據(jù)路由變化更新組件狀態(tài),這些功能為Vue3應(yīng)用增加了靈活性和響應(yīng)性,使得路由管理更加高效
    2024-09-09
  • vue使用async/await來(lái)實(shí)現(xiàn)同步和異步的案例分享

    vue使用async/await來(lái)實(shí)現(xiàn)同步和異步的案例分享

    近期項(xiàng)目中大量使用async,從服務(wù)器獲取數(shù)據(jù),解決一些并發(fā)傳參問(wèn)題,代碼很簡(jiǎn)單,在此也看了一些博客,現(xiàn)在async/await已經(jīng)大范圍讓使用,所以本文給大家介紹一下vue使用async/await來(lái)實(shí)現(xiàn)同步和異步的案例,需要的朋友可以參考下
    2024-01-01
  • 結(jié)合axios對(duì)項(xiàng)目中的api請(qǐng)求進(jìn)行封裝操作

    結(jié)合axios對(duì)項(xiàng)目中的api請(qǐng)求進(jìn)行封裝操作

    這篇文章主要介紹了結(jié)合axios對(duì)項(xiàng)目中的api請(qǐng)求進(jìn)行封裝操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-09-09
  • vue.js select下拉框綁定和取值方法

    vue.js select下拉框綁定和取值方法

    下面小編就為大家分享一篇vue.js select下拉框綁定和取值方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-03

最新評(píng)論