vue之省市区三级联动

  • 安装插件
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>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36181615/article/details/79950185
上一篇学习vue饿了吗之模拟后台数据
想对作者说点什么? 我来说一句

Vue2中省市区三级联动json

2017年06月06日 377KB 下载

没有更多推荐了,返回首页

关闭
关闭