vue基于element-china-area-data插件怎么實現(xiàn)省市區(qū)聯(lián)動

本篇內(nèi)容主要講解“vue基于element-china-area-data插件怎么實現(xiàn)省市區(qū)聯(lián)動”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“vue基于element-china-area-data插件怎么實現(xiàn)省市區(qū)聯(lián)動”吧!

前言

前端開發(fā)的同學(xué)們應(yīng)該都知道，省市區(qū)聯(lián)動在日常開發(fā)中用的非常多，今天跟大家分享一款好用的插件 — element-china-area-data。

安裝

npm install element-china-area-data -S
cnpm install element-china-area-data -S

代碼樣例

<template>
  <div>
    <el-cascader size="large" :options="options" v-model="provinces" @change="handleChange" placeholder="請選擇省市區(qū)"></el-cascader>
  </div>
</template>
 
<script>
import { regionData } from "element-china-area-data";//引入
export default {
  data() {
    return {
      options: regionData,//選擇格式
      provinces: [], //省市區(qū)綁定數(shù)組
    };
  },

  methods: {
    // 事件觸發(fā)
    handleChange(e) {
      console.log(e, "所選code值");
    },
  },
};
</script>

element-china-area-data 插件主要分成四種展示格式：

• provinceAndCityData

• provinceAndCityDataPlus

• regionData

• regionDataPlus

以下是設(shè)置不同屬性時對應(yīng)展示的格式：

1. provinceAndCityData 是省市兩級聯(lián)動數(shù)據(jù)且不帶 "全部" 字樣選項。當 options 的值為 provinceAndCityData 時，展示如下：

2. provinceAndCityDataPlus 是省市兩級聯(lián)動數(shù)據(jù)且顯示 "全部" 字樣選項。當 options 的值為 provinceAndCityDataPlus 時，展示如下：

3. regionData 是省市區(qū)三級聯(lián)動數(shù)據(jù)且不帶 "全部" 字樣選項。當 options 的值為 regionData 時，展示如下：

4. regionDataPlus 是省市區(qū)三級聯(lián)動數(shù)據(jù)且顯示 "全部" 字樣選項。當 options 的值為 regionDataPlus 時，展示如下：

注意： 當選擇 “全部” 字樣選項時，綁定的 value 值是空字符串。

案例

省市二級聯(lián)動（不帶“全部”選項）:

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { provinceAndCityData } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: provinceAndCityData,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

省市二級聯(lián)動（帶“全部”選項）:

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { provinceAndCityDataPlus } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: provinceAndCityDataPlus,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

省市三級聯(lián)動（不帶“全部”選項）:

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { regionData } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionData,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

省市三級聯(lián)動（帶“全部”選項）:

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { regionDataPlus } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionDataPlus,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

到此，相信大家對“vue基于element-china-area-data插件怎么實現(xiàn)省市區(qū)聯(lián)動”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！