在Vue 3 ESM构建中集成vue-select等美观选择组件的方法

需求 #

现有Vue3客户端应用，通过原生select实现了分组选择功能，需替换为带搜索的美观选择组件，排除jQuery相关方案（如select2）。

实现步骤：使用@vue-select/vue-select #

@vue-select/vue-select兼容Vue3，支持搜索、分组、禁用选项等功能，适配现有需求，具体实现如下：

1. 引入资源 #

在<head>添加组件样式：

<link rel="stylesheet" href="https://unpkg.com/@vue-select/vue-select/dist/vue-select.css">

在模块脚本中导入Vue和组件：

import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
import vSelect from "https://unpkg.com/@vue-select/vue-select/dist/vue-select.esm.js";

2. 注册组件 #

创建Vue应用后全局注册组件：

const app = createApp({ /* 原有配置 */ });
app.component("v-select", vSelect);
app.mount("#vuetest");

3. 替换模板 #

将原生<select>替换为<v-select>，适配分组数据：

<v-select
  v-model="ft_assignment"
  :options="ft_assignments"
  label="text"
  group-label="text"
  group-options="children"
  :reduce="option => option.id"
  placeholder="请选择..."
></v-select>

参数说明：

• :options：传入分组数据源
• label：选项显示文本的字段名
• group-label：分组标题的字段名
• group-options：分组下子选项的字段名
• :reduce：将选中值映射为option.id，与原select的value逻辑一致

完整代码 #

<html>
  <head>
    <title>Test</title>
    <link rel="stylesheet" href="https://unpkg.com/@vue-select/vue-select/dist/vue-select.css">
  </head>
  <body>
    <div id="vuetest">
      <v-select
        v-model="ft_assignment"
        :options="ft_assignments"
        label="text"
        group-label="text"
        group-options="children"
        :reduce="option => option.id"
        placeholder="请选择..."
      ></v-select>
    </div>

    <script type="module">
      import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
      import vSelect from "https://unpkg.com/@vue-select/vue-select/dist/vue-select.esm.js";

      const app = createApp({
        data() {
          return {
            ft_assignment: "a",
            ft_assignments: [
              {
                text: "hi",
                children: [
                  { id: "a", text: "a1" },
                  { id: "b", text: "b1" },
                ],
              },
              {
                text: "there",
                children: [
                  { id: "c", text: "c1" },
                  { id: "d", text: "d1" },
                ],
              },
            ],
          };
        },
        watch: {
          ft_assignment(v) {
            console.log(v);
          },
        },
      });

      app.component("v-select", vSelect);
      app.mount("#vuetest");
    </script>
  </body>
</html>

注意事项 #

• 组件默认自带搜索功能，无需额外配置
• 原有watch监听逻辑完全兼容，选中值变化时正常触发
• 保留子选项的disabled: true字段即可实现选项禁用

内容的提问来源于stack exchange，提问作者richarddmorey