Map()的用法

Nico.lucky

于 2023-04-22 14:47:30 发布

阅读量69

点赞数

分类专栏： vue uniapp 文章标签： vue 微信小程序

本文链接：https://blog.csdn.net/weixin_61774894/article/details/130304240

版权

vue 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

uniapp

1 篇文章 0 订阅

订阅专栏

文章介绍了如何在uni-app环境中利用uViewUI的u-select组件进行数据展示和选择，特别是单列、多列以及联动模式。在用户点击确认时，能获取并设置选中的商家名称和ID，数据获取和解析是通过自定义API完成的。

摘要由CSDN通过智能技术生成

常见场景：

u-select 列选择器要展示数组中对象里面想要的值，把id传给后台时

mode = single-column，为单列选择模式。
mode = mutil-column，为多列选择模式。
mode = mutil-column-auto，为多列联动模式。Select 列选择器 | uView - 多平台快速开发的UI框架 - uni-app UI框架uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水https://v1.uviewui.com/components/select.html

运用：

<u-select v-model="show" :list="shopList" @confirm="confirm"></u-select>

数据获取及解析：

<script>
	export default {
		data() {
			return {
				shoplist: {},
                shop_name:'',
                shop_id:'', 
			};
		},
		methods: {
         //点击确定按钮，返回当前选择的值
         confirm(e) {
				this.shop_name = e[0].label
				this.shop_id = e[0].value
			},
			//获取商家列表
			getshoplist() {
				this.$Api.shopList({
					type: 3,
					page: 1,
					pageNum: 15,
				}).then(res => {
					// this.shopList = res.data.data
					let arr = res.data.data
					this.shopList = arr.map(item => {
						return {
							label: item.f_shop_name,
							value: item.id
						}
					})
				})
			},
		},	
	}
</script>