element-ui如何使用el-cascader进行省市区的选择

效果图

1、下载安装 npm install element-china-area-data -S

2、封装 省市区级联cascader组件

<template>
  <div>
    <el-cascader style="width: 100%;" :options="options" v-model="value1" @change="handleChange" filterable
      :props="{value:'label'}" placeholder="省/市/区"></el-cascader>
  </div>
</template>

<script>
 // 引入省市区数据包
  import {
    regionData
  } from 'element-china-area-data'
  export default {
    name: "cascader",
    props: ['value'],
    data() {
      return {
        options: regionData,
        selectedOptions: []
      }
    },
    computed: {
      value1: {
        set(val) {
          this.$emit("input", val)
        },
        get(val) {
          return this.value
        }
      }
    },
    methods: {
      handleChange(value) {
        this.$emit('provincesValueChang', value)
      }
    }
  }

</script>

3、使用组件

<template>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="省/市/区" prop="area">
              <cascader
                @provincesValueChang="provincesValueChang"
                :value="[form.province, form.city, form.area]"
                @update:value="form.region = $event"
                style="width: 100%"
              ></cascader>
             </el-form-item>
        </el-form>
</template>
<script>
    import cascader from "@/components/cascader";
    export default {
        name: "Demo",
        components: {
            cascader,
          },
        data() {
          return {
              // 表单参数
              form: {},
              rules:{}
            }
         }
        methods: {
            // 省市区
            provincesValueChang(value) {
              this.form.province = value[0];
              this.form.city = value[1];
              this.form.area = value[2];
            },
        }
    }
</script>