单列选择器
代码如下
<template>多列选择器
<view>
<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
<view style="padding: 20rpx;background-color: white;">{{ array[index].name }}</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
array: [{ name: '中国' }, { name: '美国' }, { name: '巴西' }, { name: '日本' }],
index: 2,
};
},
methods: {
bindPickerChange: function(e) {
this.index = e.detail.value;
}
}
};
</script>
代码如下:
<template>
<view>
<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
<view style="background-color: white;">
{{ multiArray[0][multiIndex[0]] }},
{{ multiArray[1][multiIndex[1]] }},
{{ multiArray[2][multiIndex[2]] }}
</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
multiArray: [['亚洲', '欧洲'], ['中国', '日本'], ['北京', '上海', '广州']],
multiIndex: [0, 0, 0]
};
},
methods: {
bindMultiPickerColumnChange: function(e) {
this.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0: //拖动第1列
switch (this.multiIndex[0]) {
case 0:
this.multiArray[1] = ['中国', '日本'];
this.multiArray[2] = ['北京', '上海', '广州'];
break;
case 1:
this.multiArray[1] = ['英国', '法国'];
this.multiArray[2] = ['伦敦', '曼彻斯特'];
break;
}
this.multiIndex.splice(1, 1, 0);
this.multiIndex.splice(2, 1, 0);
break;
case 1: //拖动第2列
switch (
this.multiIndex[0] //判断第一列是什么
) {
case 0:
switch (this.multiIndex[1]) {
case 0:
this.multiArray[2] = ['北京', '上海', '广州'];
break;
case 1:
this.multiArray[2] = ['东京', '北海道'];
break;
}
break;
case 1:
switch (this.multiIndex[1]) {
case 0:
this.multiArray[2] = ['伦敦', '曼彻斯特'];
break;
case 1:
this.multiArray[2] = ['巴黎', '马赛'];
break;
}
break;
}
this.multiIndex.splice(2, 1, 0);
break;
}
this.$forceUpdate();
}
}
};
</script>
网友回复
python如何实现torrent的服务端进行文件分发p2p下载?
如何在浏览器中录制摄像头和麦克风数据为mp4视频保存下载本地?
go如何编写一个类似docker的linux的虚拟容器?
python如何写一个bittorrent的种子下载客户端?
ai能通过看一个网页的交互过程视频自主模仿复制网页编写代码吗?
ai先写功能代码通过chrome mcp来进行测试功能最后ai美化页面这个流程能行吗?
vue在手机端上下拖拽元素的时候如何禁止父元素及body的滚动导致无法拖拽完成?
使用tailwindcss如何去掉响应式自适应?
有没有直接在浏览器中运行的离线linux系统?
nginx如何保留post或get数据进行url重定向?