1. 程式人生 > >vue之省市區三級聯動

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>