vue基于element-china-area-data插件怎么实现省市区联动

本篇内容主要讲解“vue基于element-china-area-data插件怎么实现省市区联动”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue基于element-china-area-data插件怎么实现省市区联动”吧!

前言

前端开发的同学们应该都知道，省市区联动在日常开发中用的非常多，今天跟大家分享一款好用的插件 — 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插件怎么实现省市区联动”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！