Vue-Multiselect 使用教程

项目介绍

Vue-Multiselect 是一个基于 Vue.js 的多选组件库，提供了丰富的功能和灵活的配置选项。它支持自定义渲染选项、搜索过滤、标签输入等功能，适用于需要在表单中进行多选的场景。

项目快速启动

安装

首先，通过 npm 或 yarn 安装 Vue-Multiselect：

npm install @vue-multiselect/core
# 或者
yarn add @vue-multiselect/core

引入和使用

在你的 Vue 项目中引入并使用 Vue-Multiselect：

import { createApp } from 'vue';
import App from './App.vue';
import VueMultiselect from '@vue-multiselect/core';
import '@vue-multiselect/core/dist/vue-multiselect.css';

const app = createApp(App);
app.component('VueMultiselect', VueMultiselect);
app.mount('#app');

在你的组件中使用 Vue-Multiselect：

<template>
  <div>
    <vue-multiselect
      v-model="selected"
      :options="options"
      :multiple="true"
      :close-on-select="false"
      placeholder="选择你喜欢的库"
      label="name"
      track-by="name"
    ></vue-multiselect>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selected = ref([]);
    const options = ref([
      { name: 'React', language: 'JavaScript' },
      { name: 'Vue', language: 'JavaScript' },
      { name: 'Angular', language: 'TypeScript' },
      { name: 'Svelte', language: 'JavaScript' }
    ]);

    return {
      selected,
      options
    };
  }
};
</script>

应用案例和最佳实践

自定义渲染选项

Vue-Multiselect 支持自定义选项的渲染方式，可以用于展示更复杂的数据结构：

<template>
  <div>
    <vue-multiselect
      v-model="selected"
      :options="options"
      :multiple="true"
      :custom-label="customLabel"
      placeholder="选择你喜欢的库"
      track-by="name"
    ></vue-multiselect>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selected = ref([]);
    const options = ref([
      { name: 'React', language: 'JavaScript' },
      { name: 'Vue', language: 'JavaScript' },
      { name: 'Angular', language: 'TypeScript' },
      { name: 'Svelte', language: 'JavaScript' }
    ]);

    const customLabel = ({ name, language }) => `${name} (${language})`;

    return {
      selected,
      options,
      customLabel
    };
  }
};
</script>

搜索过滤

Vue-Multiselect 内置了搜索功能，可以方便地过滤选项：

<template>
  <div>
    <vue-multiselect
      v-model="selected"
      :options="options"
      :multiple="true"
      :searchable="true"
      placeholder="选择你喜欢的库"
      label="name"
      track-by="name"
    ></vue-multiselect>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selected = ref([]);
    const options = ref([
      { name: 'React', language: 'JavaScript' },
      { name: 'Vue', language: 'JavaScript' },
      { name: 'Angular', language: 'TypeScript' },
      { name: 'Svelte', language: 'JavaScript' }
    ]);

    return {
      selected,
      options
    };
  }
};
</script>

典型生态项目

Vue-Multiselect 可以与其他 Vue 生态项目结合使用，例如：

• **Vue