v-distpicker 一個好用的三級聯動的插件

 

// 引入插件
npm install v-distpicker --save

import VDistpicker from 'v-distpicker'

Vue.component('v-distpicker', VDistpicker)

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

:placeholders="placeholders"

data() {
      return {
          placeholders: {
              province: '------- 省 --------',
              city: '--- 市 ---',
              area: '--- 區 ---',
          }
      }
  }

// 配置mo默認值

:province="select.province" :city="select.city" :area="select.area"

data() { return { select: { province: '廣東省', city: '廣州市', area: '海珠區' }, } },

// 開啟手機模式

type="mobile"

// 隱藏區

<v-distpicker hide-area></v-distpicker>

// 觸發事件

@selected="onSelected"

// 只有省，或者縣

<v-distpicker only-province></v-distpicker>

官網： https://distpicker.pigjian.com/