首先，确保你已经安装了 Vant4：
npm install vant@next
然后，在你的 Vue 组件中引入 van-picker-group：
<template>
<div>
<van-picker-group
v-model="selectedValues"
:columns="columns"
@change="onChange"
/>
</div>
</template>
<script>
import { ref } from 'vue';
import { PickerGroup } from 'vant';
import 'vant/lib/index.css'; // 引入样式
export default {
components: {
[PickerGroup.name]: PickerGroup,
},
setup() {
const selectedValues = ref([]);
const columns = ref([
{
values: ['选项1', '选项2', '选项3'],
},
{
values: ['子选项1', '子选项2', '子选项3'],
},
]);
const onChange = (values, index) => {
// 在这里处理选择变化事件
console.log('选择变化', values, index);
};
return {
selectedValues,
columns,
onChange,
};
},
};
</script>
在上面的例子中，我们使用了 van-picker-group 组件，并通过 v-model 指令将选择器组的值与一个 Vue 变量 selectedValues 进行双向绑定。
我们通过 :columns 属性设置选择器组的列，每列是一个对象，其中 values 表示列中的选项。
监听了 @change 事件，当选择发生变化时触发。你可以在这里处理相应的逻辑。
最后，别忘了引入样式文件，这样样式才能正确应用。
转载请注明出处：http://www.zyzy.cn/article/detail/5809/Vant