uniapp中的picker标签使用从服务器请求的动态数据

最新推荐文章于 2024-08-09 15:31:19 发布

D_lunar

最新推荐文章于 2024-08-09 15:31:19 发布

阅读量6k

点赞数 2

分类专栏： uniapp 文章标签： html5

本文链接：https://blog.csdn.net/D_lunar/article/details/106916725

版权

uniapp 专栏收录该内容

26 篇文章 5 订阅

订阅专栏

picker标签用法：

<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
	<view class="uni-input">{{ multiArray[0][multiIndex[0]] }}>{{ multiArray[1][multiIndex[1]] }}</view>
</picker>

onLoad时请求数据，并进行赋值：

//……request请求略……
this.typedata=res.data;
var column1 = [];
var column2 = [];
this.multiArray = [];
this.typedata.forEach((item, index) => {
    column1.push(item.Name1);
	if (index == 0) {
		item.detail.forEach((item2, index2) => {
			column2.push(item2.Name2);
			if (index2 == 0) {
				this.sendDate.TYPE = item2.Value2;//上传时需要这个数据
			}
		});
	}
});
this.multiArray.push(column1);
this.multiArray.push(column2);

其中请求的数据格式如下：

[{
	"Value1": "0",
	"Name1": "亚洲",
	"detail": [{
		"Value2": 5,
		"Name2": "中国"
	}, {
		"Value2": 10,
		"Name2": "日本"
	}, {
		"Value2": 22,
		"Name2": "韩国"
	}]
}, {
	"Value1": "1",
	"Name1": "欧洲",
	"detail": [{
		"Value2": 2,
		"Name2": "英国"
	}, {
		"Value2": 3,
		"Name2": "德国"
	}, {
		"Value2": 4,
		"Name2": "意大利"
	}, {
		"Value2": 6,
		"Name2": "西班牙"
	}, {
		"Value2": 0,
		"Name2": "希腊"
	}, {
		"Value2": 1,
		"Name2": "爱尔兰"
	}, {
		"Value2": 21,
		"Name2": "法国"
	}]
}]

改变列时，代码如下：

bindMultiPickerColumnChange: function(e) {
    //index从0开始，e.detail.column和e.detail.value也是从0开始
	console.log('修改的列为：' + e.detail.column + '，当前行为：' + e.detail.value);
	this.multiIndex[e.detail.column] = e.detail.value;
	var column2 = [];

	console.log(this.typedata);
	console.log(this.multiIndex[0]); //第一列的当前行
	console.log(this.multiIndex[1]); //第二列的当前行

	this.typedata.forEach((item, index) => {
		if (index == this.multiIndex[0]) {
			item.detail.forEach((item2, index2) => {
			    column2.push(item2.Name2);
				if (index2 == this.multiIndex[1]) {
					this.sendDate.TYPE = item2.Value2;
				}
                                //拖动第一列后第二列对应的数据行数小于拖动前第二列的当前行
				if (this.multiIndex[1] > item.detail.length-1) {
					this.sendDate.TYPE = item.detail[0].Value2;
					this.multiIndex.splice(1, 1, 0);//第二列的行回到第一行
				}
			});
		}
	});
	this.multiArray[1] = column2;
	this.$forceUpdate();
},

其中：this.multiIndex.splice(1, 1, 0);

第一个1表示删除数组中的元素时从第二个元素开始（包括第二个元素），因为index从0开始。

第二个1表示删除一个元素。

第三个0表示在数组中增加一个元素0。

所以this.multiIndex.splice(1, 1, 0);的意思就是：将数组中的第二个元素改为0