uni——picker普通选择器

案例演示

代码

<picker mode="selector" :value="hobbyValue" :range="hobbyList" range-key="name" @change="chooseHobby">
	{{hobbyValue?hobbyValue:'请下拉选择'}}
	<image src="/static/images/selectedImg.png" mode="aspectFill" class="selectedImg">image>
picker>

data() {
	return {
		// 客户爱好
		hobbyList: [{
			id: '1',
			name: '红色',
		}, {
			id: '2',
			name: '绿色',
		}, {
			id: '3',
			name: '蓝色',
		}],
		hobbyValue: '',
	}
},
methods:{
	// 客户爱好
	chooseHobby(e) {
		// console.log(e);
		let key = e.detail.value
		this.hobbyValue = this.hobbyList[key].name
		console.log("爱好",this.hobbyValue);
	},
}

如果是可编辑

进入页面先进行查询详情，之后后台返回数据，判断数据进行显示内容

<picker mode="selector" :value="status" :range="statusList" range-key="name" @change="chooseStatus">
	{{status===''?'请选择':status==0?'禁用':'正常'}}
	<image src="/static/images/selectDown.png" mode="aspectFill">image>
picker>

data() {
	return {
		// 状态
		statusList: [{
			id: 0,
			name: '禁用',
		}, {
			id: 1,
			name: '正常',
		}],
		staff_id: '', //编辑员工id
		names: '', 
		account: '', 
		password: '',
		status: '', //状态0=禁用1=正常
	}
},
methods: {
	chooseStatus(e) {
		let key = e.detail.value
		this.status = this.statusList[key].id
	},
	getDetails(){
		this.$common.request('post', '/agent/index/staffInfo', {
			id: this.id, //编辑员工id
		}).then(res => {
			if (res.code == 1) {
				this.names = res.data.names
				this.account = res.data.account
				this.status = res.data.status //状态0=禁用1=正常
			}
		})
	}
}

网址

https://uniapp.dcloud.net.cn/component/picker.html#%E6%99%AE%E9%80%9A%E9%80%89%E6%8B%A9%E5%99%A8