vue之省市区三级联动

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36181615/article/details/79950185

• 安装插件

npm install v-distpicker --save

• 使用

<template>
    <v-distpicker @selected="onSelected"></v-distpicker>
</template>

<script>
import VDistpicker from 'v-distpicker'
export default {
    data () {
        return {
            select:{
                province: '',
                city: '',
                area: ''
            }
        }
    },
    components：{
        VDistpicker
    },
    methods: {
        //当三级都选择完触发onSelected
        onSelected (data) {
            console.log(data)
            // data数据如下
            //area: {code: "320211", value: "滨湖区"}
            //city: {code: "320200", value: "无锡市"}
            //province: {code: "320000", value: "江苏省"}

            this.select.province = data.province
        }
    }
}
</script>

---

• 二级联动，加入hide-area即可

<v-distpicker @selected="onSelected" hide-area></v-distpicker>