uniapp框架uview三级联动Picker使用_uniapppicker要啥格式-优快云博客

本文链接：https://blog.youkuaiyun.com/nbap_/article/details/128382336

这篇博客详细介绍了如何在Vue应用中使用u-picker组件来实现三级联动选择的功能。作者首先展示了u-picker的HTML结构，并定义了data属性和methods方法。在methods中，addsite方法用于获取数据并初始化columns，changeHandler方法处理列值变化，根据当前选择更新后续列的选项，而confirm和cancel方法分别处理确认和取消操作。博客重点在于动态更新picker的列值，实现选择项的联动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据格式是这样的

<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
			},

}