vue基于element-china-area-data插件實現省市區(qū)聯動

更新時間：2022年04月22日 09:09:45 作者：水星記_

省市區(qū)聯動在日常開發(fā)中用的非常多，本文就介紹一下vue基于element-china-area-data插件實現省市區(qū)聯動，具有一定的參考價值，感興趣的可以了解一下

前言

前端開發(fā)的同學們應該都知道，省市區(qū)聯動在日常開發(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ū)綁定數組
    };
  },

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

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

provinceAndCityData
provinceAndCityDataPlus
regionData
regionDataPlus

以下是設置不同屬性時對應展示的格式：

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

在這里插入圖片描述

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

在這里插入圖片描述

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

在這里插入圖片描述

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

在這里插入圖片描述

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

在這里插入圖片描述

案例

省市二級聯動（不帶“全部”選項）:

<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>

省市二級聯動（帶“全部”選項）:

<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>

省市三級聯動（不帶“全部”選項）:

<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>

省市三級聯動（帶“全部”選項）:

<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插件實現省市區(qū)聯動的文章就介紹到這了,更多相關vue 省市區(qū)聯動內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: