vue实现省市区三级联动地址选择组件

昨天收到一个新的需求，需要选择地址，因此就要做一个省市区三级联动的组件来使用，在网上找了一些资源，然后进行了尝试，没想到就这么成功了！要记录一下方便后续使用。

效果如下：

 下面就记录一下代码叭！

一、 封装vue组件

二、在页面中引用

    data() {
        var validatePass = (rule, value, callback) => {
            
            if (this.ruleForm.address.province == '' || this.ruleForm.address.detail == '') {
                callback(new Error('请输入完整地址'));
            }
            callback();
        };
        return {
            supplierList: [],
  
            direction: 'btt',
            ifCreate: false,
            ruleForm: {
                address: {
                    // 省
                    province: "",
                    // 市
                    city: "",
                    // 区
                    district: "",
                    //详细地址
                    detail: "",
                }
            },
            rules: {
                address: [
                    { required: true ,validator: validatePass, trigger: 'blur' },
                ]
            }
        }
    },

  watch: {
    ruleForm: {
      // deep:true,
      handler() {
        this.ruleForm.address = this.$refs.address.form
        console.log(this.ruleForm.address)
      }
    }
  },

三、去网上找个Address.json文件放进去就好了

后面因为需要动态绑定，以及处理回显问题，就需要进行一些其它的处理：

解决elementui 的省市区级联选择器数据不回显问题http://t.csdn.cn/lVPn6