uView 实现三级联动

<u-picker
          :show="pickerShow"
          :columns="cloumns"
          keyName="name"
          ref="uPicker"
          closeOnClickOverlay
          @confirm="handleConfirm"
          @cancel="pickerShow=false"
          @change="changeHandler"
        ></u-picker>

<script>
import HomeAPI from '@/service/api/my_appeal/post_appeal'//引入接口
export default {
data(){
 	   return{
      pickerShow:'false'
           columns: [],
			     columnData:[],
		    }
	  }
methods:{
  //接口获取了参数之后处理数据
  getData (type) {
      let params = {
        type: type,
      }
      HomeAPI.APIworkOrderGetType(params).then((res) => {
        if (res.code == 200) {
          this.columns = [];
          this.columnData = [];
          this.columns.push(res.data);
          this.columns.push(res.data[0].children);
          this.columns.push(res.data[0].children[0].children);
          res.data.forEach(item => {
            if (item.children.length > 0) {
              this.columnData.push(item.children)
            }
          })
        } else {
          this.$message.error(res.desc);
        }
      })
    },
    //滑动一级二级数据改变
  changeHandler(e){
    const {
          columnIndex,
          value,
          values, // values为当前变化列的数组内容
          index,
          indexs,
          // 微信小程序无法将picker实例传出来，只能通过ref操作
          picker = this.$refs.uPicker,
        } = e;
        //index  第一列的索引值
        //indexs  第二列的索引   打印indexs为[0,1,0]第一个为第一列索引  第二个为第二个索引
        // 当第一列值发生变化时，变化第二列(后一列)对应的选项
        if (columnIndex === 0) {
          // picker为选择器this实例，变化第二列对应的选项
          picker.setColumnValues(1, this.columns[0][indexs[0]].children);
          picker.setColumnValues(2, this.columnData[indexs[0]][indexs[1]].children);
        } else if (columnIndex === 1) {
          picker.setColumnValues(2, this.columnData[indexs[0]][indexs[1]].children);
        }
  }
}
}
</script>