uni——picker普通选择器

耶啵奶膘

已于 2023-04-23 11:33:22 修改

阅读量1.4k

点赞数 2

分类专栏： uni、vue 文章标签： uni-app

于 2022-12-28 11:23:58 首次发布

本文链接：https://blog.csdn.net/xulihua_75/article/details/128466141

版权

uni、vue 专栏收录该内容

119 篇文章 7 订阅

订阅专栏

案例演示

在这里插入图片描述

代码

<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=正常
			}
		})
	}
}