Vue配合iView實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)的示例代碼

更新時(shí)間：2018年07月27日 09:23:36 作者：Dong

本篇文章主要介紹了Vue配合iView實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)時(shí)，如果省份和城市寫(xiě)在一個(gè)數(shù)組對(duì)象中?？梢愿鶕?jù)，點(diǎn)擊某個(gè)省份時(shí)獲取到目標(biāo)省份的id 是否同數(shù)組中的某個(gè)對(duì)象id一致來(lái)判斷

iView中的on-change事件

on-change事件：即選中的Option變化時(shí)觸發(fā)，默認(rèn)返回 value。（value在這里只支持String和Number類(lèi)型）

1、html部分

<template>
  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
    <FormItem prop="province" label="省份">
       <Select v-model="formValidate.province" placeholder="請(qǐng)選擇城市" @on-change="change">
        <Option v-for="item in provinceArr" :key="item.id" :value="item.id" >{{ item.name}}</Option>
       </Select>
    </FormItem>
    <FormItem prop="city" label="城市">
       <Select v-model="formValidate.city" placeholder="請(qǐng)選擇省份">
         <Option v-for="item in cities" :key="item.id" :value="item.id" >{{ item.name}}</Option>
       </Select>
     </FormItem>
   </Form>
</template>

2、JS主要部分

<script>
  export default{
    data(){
      return {
        provinceArr: [
          {
            id:1,
            name:"北京市",
            cities:[{id:11,
                name:"北京市"}]
          },
          {
            id:2,
            name:"天津市",
            cities:[{id:12,
                name:"天津市"} ]
          },
          {
            id:3,
            name:"上海市",
            cities:[ {id:13,
                name:"上海市"} ]
          }
        ],
        cities: "",
        formValidate:...,
        ruleValidate:...
      }
    },
    methods:{
      change(val){
       for(var i=0; i<this.provinceArr.length; i++){
        if(val == this.provinceArr[i].id ){
         this.cities = this.provinceArr[i].cities;
        }
       }
      }
    }
  }
</script>

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

您可能感興趣的文章:

相關(guān)文章

通過(guò)debug搞清楚.vue文件如何變成.js文件(案例詳解)
這篇文章主要介紹了通過(guò)debug搞清楚.vue文件如何變成.js文件,本文以@vitejs/plugin-vue舉例,通過(guò)debug的方式帶你一步一步的搞清楚vue文件是如何編譯為js文件的,需要的朋友可以參考下
2024-07-07
Vue使用v-for數(shù)據(jù)渲染順序混亂的原因及解決方案
在 Vue.js 中,使用 v-for 指令進(jìn)行數(shù)據(jù)渲染時(shí),有時(shí)會(huì)遇到渲染順序混亂的問(wèn)題,這種問(wèn)題主要與 Vue 的響應(yīng)式系統(tǒng)、DOM 更新機(jī)制以及數(shù)組的變更方法有關(guān),以下是對(duì)這一現(xiàn)象的深入分析及解決方案,需要的朋友可以參考下
2025-01-01
Vue如何通過(guò)Vue.prototype定義原型屬性實(shí)現(xiàn)全局變量
在Vue.js開(kāi)發(fā)中,通過(guò)原型屬性為Vue實(shí)例添加全局變量是一種常見(jiàn)做法,使用$前綴命名,可以避免與組件內(nèi)部的數(shù)據(jù)、方法或計(jì)算屬性產(chǎn)生命名沖突,這種方式簡(jiǎn)單有效,確保了變量在所有Vue實(shí)例中的可用性,同時(shí)保持全局作用域的整潔
2024-10-10
vue中配置mint-ui報(bào)css錯(cuò)誤問(wèn)題的解決方法
本篇文章主要介紹了vue中配置mint-ui報(bào)css錯(cuò)誤問(wèn)題的解決方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-10-10
vue集成一個(gè)支持圖片縮放拖拽的富文本編輯器
這篇文章主要介紹了vue集成一個(gè)支持圖片縮放拖拽的富文本編輯器，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-01-01
Vue響應(yīng)式原理與虛擬DOM實(shí)現(xiàn)步驟詳細(xì)講解
在Vue中最重要、最核心的概念之一就是響應(yīng)式系統(tǒng)。這個(gè)系統(tǒng)使得Vue能夠自動(dòng)追蹤數(shù)據(jù)變化，并在數(shù)據(jù)發(fā)生變化時(shí)自動(dòng)更新相關(guān)的DOM元素。本文將會(huì)探討Vue響應(yīng)式系統(tǒng)的實(shí)現(xiàn)原理及其底層實(shí)現(xiàn)
2023-03-03
vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算商品價(jià)格
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算商品價(jià)格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
Element-UI控件Tree實(shí)現(xiàn)數(shù)據(jù)樹(shù)形結(jié)構(gòu)的方法
這篇文章主要介紹了Element-UI控件Tree實(shí)現(xiàn)數(shù)據(jù)樹(shù)形結(jié)構(gòu),本期介紹添加、修改等功能也比較簡(jiǎn)單,可以通過(guò)element-ui的$prompt彈框控件來(lái)實(shí)現(xiàn),需要的朋友可以參考下
2024-01-01
Vuex之理解Mutations的用法實(shí)例
本篇文章主要介紹了Vuex之理解Mutations的用法實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
使用 Vue 實(shí)現(xiàn)一個(gè)虛擬列表的方法
這篇文章主要介紹了使用 Vue 實(shí)現(xiàn)一個(gè)虛擬列表的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-08-08