uniapp多列选择器
时间: 2023-07-08 17:41:26 浏览: 139
在 Uniapp 中,可以使用 `picker` 组件来实现多列选择器。下面是一个简单的例子:
```html
<template>
<view>
<picker :value="value" @change="onChange">
<view class="picker-item" v-for="item in columns">{{ item }}</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
columns: ['北京', '上海', '广州', '深圳'],
value: [0, 1, 2], // 默认选中的列
};
},
methods: {
onChange(e) {
console.log('当前选中的值为:', e.detail.value);
},
},
};
</script>
```
在这个例子中,我们使用 `picker` 组件来创建一个多列选择器。`columns` 数组存储了选择器的每一列显示的内容,`value` 数组则表示默认选中的列。在模板中,我们使用 `v-for` 指令遍历 `columns` 数组,并将每个元素渲染为选择器的一个选项。当用户选择某个选项时,会触发 `change` 事件,我们可以在事件处理函数中获取当前选中的值。
需要注意的是,`picker` 组件需要在 `uni-app` 的 `nvue` 模板中使用。如果你使用的是 `vue` 模板,可以使用 `vant` 或者 `element-ui` 等第三方 UI 组件库来实现多列选择器。
阅读全文