首页uniapp picker 多列选择器用法

uniapp picker 多列选择器用法

时间: 2025-01-04 10:03:47 浏览: 149

uniApp 的 Picker 组件提供了一个多列选择器的功能，允许用户同时选择多个选项并分组显示。以下是基本的用法： 1. 首先，引入所需的组件： ```html <template> <picker v-model="selectedOptions" :columns="columns">  </picker> </template> ``` 2. 定义数据属性 `selectedOptions` 用于存储当前选中的值，以及 `columns` 数组表示每个列的选项： ```js <script> export default { data() { return { selectedOptions: [], columns: [ { label: '列1标题', values: ['选项1', '选项2', '选项3'] }, { label: '列2标题', values: ['选项A', '选项B', '选项C'] } ] }; } }; </script> ``` 3. 用户交互通过 `v-model` 连接数据，当用户改变选择时，`selectedOptions` 就会自动更新。 4. 您还可以设置列的默认选中项和禁选项，以及其他属性如间隔、滚动等。示例演示： ```html <picker :value="selectedOptions[0]" @change="handlePickerChange">  <picker-column :values="columns[0].values" />  <picker-column :values="columns[1].values" /> </picker> <script> methods: { handlePickerChange(value) { // value 是一个数组，包含每个列选中的值 console.log('选择的选项:', value); } } </script> ```

阅读全文