van-picker怎样实现多选
时间: 2023-12-28 14:03:28 浏览: 90
uni-app uni-data-picker 省市区数据表
3星 · 编辑精心推荐
Van-picker可以通过设置属性`show-toolbar`为`true`,使其显示工具栏,工具栏中包括了确定和取消按钮。当用户点击确定按钮时,可以通过监听`confirm`事件获取当前选中的值。
在多选的情况下,需要将`show-toolbar`属性设置为`true`,并将`columns`属性设置为一个包含多个列配置的数组,每个列配置中需要设置`type`为`checkbox`,表示该列是一个复选框列,同时需要设置`values`为该列中所有选项的数组。
以下是一个多选示例代码:
```html
<van-picker
show-toolbar
:columns="columns"
@confirm="onConfirm"
@cancel="onCancel"
></van-picker>
```
```javascript
export default {
data() {
return {
columns: [
{
type: 'checkbox',
values: ['选项1', '选项2', '选项3']
},
{
type: 'checkbox',
values: ['选项4', '选项5', '选项6']
}
]
};
},
methods: {
onConfirm(value) {
console.log('选中的值:', value);
},
onCancel() {
console.log('取消选择');
}
}
};
```
阅读全文