vue中mintui二级联动选择器

效果如下：

首先要引入elementui,这里就不多说了，我们直接使用

 <div>
        科室名称
        <input type="text" placeholder="请选择" @click="popupVisible=true" v-model="depts2.name" />
 </div>

这里我们使用两个picker,用popup包裹

	<!-- 选择科室 -->
    <mt-popup v-model="popupVisible" class="popup">
      <div class="picker-toolbar" style="text-align:center;">科室选择</div>
      <mt-picker
        ref="pickerObj"
        :slots="depts"
        @change="onDeptsChange"
        valueKey="deptName"
        style="float:left;width:50%;"
      ></mt-picker>
      <mt-picker
        :slots="depts2"
        valueKey="deptName"
        @change="onDeptsOptionsChange"
        style="float:right;width:50%;"
        v-if="depts2[0].values!=''"
      ></mt-picker>
      <button class="yes" @click="popupVisible=false" >确定</button>
    </mt-popup>

这里是整个popup的样式，用的是sass，可以根据要求修改

.popup {
  width: 80%;
  margin: 0 auto;
  min-height: 17.5rem;

  border-radius: 0.75rem;
  .picker-toolbar {
    padding: 0.5rem 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    border-bottom: 0.05rem solid #f6f9fc;
    color: rgba(45, 141, 247, 1);

    .popup-cancel {
      float: left;
    }
    .popup-confirm {
      float: right;
    }
  }
}

data数据结构

data() {
    return {
      depts: [  //一级选择器
        {
          values: []
        }
      ],
      depts2: [   //二级选择器
        {
          values: []
        }
      ],
    }
 };
 methods(){
     getOption(pid) {
	  //发送请求，返回选择器数据
      this.$api.getDepts({ pid: this.pid }).then(
        data => {
        	//pid是接口返回来的用于标识父级还是子级的字段
          if (pid == 0) {
            this.depts[0].values = data.data || [];
          } else {
            this.depts2[0].values = data.data || [];
          }
        },
        err => {
          err.msg && this.$messagebox.alert(err.msg);
        }
      );
    },
    //选择一级事件
    onDeptsChange(picker, values) {
      if(values!=''){
        this.getDepts(values[0].id);
      }
    },
    //选择二级
    onDeptsOptionsChange(picker, values) {
      this.deptId = values[0].id;
      this.depts2.name = values[0].deptName;
    },
 },
 created() {
    this.getOption(0);
 }