Vue 省三级联动插件

Question

VUE 请问有没有人用过好用的vue省三级联动插件，可以绑定v-model的，或者你们知道怎么取v-distpicker中的值吗

Answer 1

这样效果行不行啊，手写的。

Answer 2

点击上一级的时候传递index过去，然后遍历当前选中的下级列表，以此类推

Answer 3

这种？

Answer 4

https://github.com/QingWei-Li...

no thanks

Answer 5

用element-ui

Answer 6

被面试了吗？哈哈，我做过，只不过是juery做的，不过原理差不过。演示地址。

Answer 7

三级联动

1. 新建一个.js文件内容都是各个地区的名字以及value值。并 将其利用es6的方法暴露出去

js文件如下

可以看出 我暴露出一个方法，利用返回值，拿到各个地区的值

1. 在vue组件中引入 js

<template>
<div>
    <Cascader :data="data" trigger="hover" style="width: 300px" v-model="test" @on-change="change_city"></Cascader>
</div>
</template>

<script>
import City from '../../All-commonality/City'

export default {
  name:"",
  data(){
      return{
        test:"",
        data: City()
      }
  },
  methods:{
      change_city(value,name){   // 选择城市
            let city_name = name.map(o => o.label)
            this.test = value
            console.log(city_name)
            
             province = city_name[0]
             city = city_name[1]
             district = city_name[2]

            console.log(province,city,district,'two')
            console.log(this.test,'three')

        }
  },
</script>  

==change_city(value,name){}== 这个方法的两个参数会返回
地区的名字，以及地区对应的value值。