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/