uniapp框架uview三级联动Picker使用

数据格式是这样的

 

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

data(){
    return {
        show: false,
		columns: [],
		columnsList: []
    }

}
methods: {
    async addsite() {
		  try {
				let sitepush = await new         
                this.Request(this.Urls.m().threelevel).modepost()
			    this.columnsList = sitepush.data.data
				let nameone = this.columnsList.map((e)=>{
						return e.name
				})
				this.columns.push(nameone)
				let nametow = this.columnsList[0].childlist.map((e)=>{
						return e.name
				})
				this.columns.push(nametow)
				let nametherr = this.columnsList[0].childlist[0].childlist.map((e)=>{
						return e.name
				})
				this.columns.push(nametherr)
				const picker = this.$refs.uPicker
				picker.setColumns(this.columns)
			} 
            catch (e) {
				console.log(e)
		    }
	},

    changeHandler(e) {
				const {
					columnIndex,
					value,
					values, 
					index,
					indexs,
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					let items = this.columnsList[index].childlist.map((e) => {
						return e.name
					})
					picker.setColumnValues(1, items)
					items = this.columnsList[index].childlist[0].childlist.map((e) => {
						return e.name
					})
					picker.setColumnValues(2, items)
				}
				if (columnIndex === 1) {
			   let items = this.columnsList[indexs[0]].childlist[index].childlist.map(
						(e) => {
							return e.name
					    })
					picker.setColumnValues(2, items)
				}
			},

     confirm(e) {
				console.log('confirm', e)
				this.show = false
			},
     cancel(){
				this.show = false
			},

}