uni-app 使用multi-select

UniApp 的 multi-select 功能是指在一个界面中提供一个多选列表，用户可以从中选择多个选项。在 UniApp 开发中，为了实现这个功能，你可以利用其内置的组件库，如 `u-picker` 或者自定义组件结合 `picker-column` 和 `picker-items` 来构建。

以下是一个简单的步骤说明：

1. 引入依赖：在你的 Vue 文件中，首先需要引入 `uni-picker` 组件：

   <template>
     <!-- ... -->
   </template>

   <script setup>
   import { picker } from '@vant/components';
   </script>

2. 创建 multi-select 组件：

   <van-picker v-model="selectedValues" :columns="columns" @change="onChange">
     <van-picker-column title="请选择" value-key="value">
       <!-- 这里是你的选项数据数组，每个选项都有 'value' 和 'label' 属性 -->
       <template v-for="(item, index) in options" :key="index">
         <van-picker-item :value="item.value" :label="item.label"></van-picker-item>
       </template>
     </van-picker-column>
   </van-picker>

3. 初始化状态和处理函数：

   const selectedValues = ref([]);
   const columns = [
     {
       title: '标题',
       values: options, // 你的选项数据数组
     }
   ];

   function onChange(values) {
     selectedValues.value = values;
     // 根据需要处理选中的值
   }

   // 你需要定义 options 数组，例如：
   const options = [
     { value: 'option1', label: '选项1' },
     { value: 'option2', label: '选项2' },
     { value: 'option3', label: '选项3' },
     // 更多选项...
   ];

4. 当你需要获取用户选择的值时，可以直接使用 `selectedValues` 变量。