vue基於element-china-area-data外掛實現省市區聯動

2022-04-22 10:00:17

前言

前端開發的同學們應該都知道，省市區聯動在日常開發中用的非常多，今天跟大家分享一款好用的外掛 — 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="請選擇省市區"></el-cascader>
  </div>
</template>
 
<script>
import { regionData } from "element-china-area-data";//引入
export default {
  data() {
    return {
      options: regionData,//選擇格式
      provinces: [], //省市區繫結陣列
    };
  },

  methods: {
    // 事件觸發
    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 是省市區三級聯動資料且不帶 "全部" 字樣選項。當 options 的值為 regionData 時，展示如下：

4. regionDataPlus 是省市區三級聯動資料且顯示 "全部" 字樣選項。當 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外掛實現省市區聯動的文章就介紹到這了,更多相關vue 省市區聯動內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！