用 vue combogrid 多选下拉框实现

1. 安装 vue-combogrid

首先需要安装 vue-combogrid，可以通过 npm 或 yarn 安装：

npm install vue-combogrid --save

或

yarn add vue-combogrid

2. 导入 vue-combogrid 组件

在需要使用 vue-combogrid 组件的文件中，导入 vue-combogrid 组件：

import VueCombogrid from 'vue-combogrid'

3. 注册 vue-combogrid 组件

在 vue 文件的 components 中，注册 vue-combogrid 组件：

export default {
  components: {
    VueCombogrid
  },
  ...
}

4. 设置 vue-combogrid 的属性和方法

在 vue-combogrid 组件中，需要设置 props 和 methods。

- props：设置 vue-combogrid 组件的属性，如数据源，下拉框的宽度等。
- methods：设置 vue-combogrid 组件的方法，如获取选中的值等。

以下是一个简单的示例代码：

<template>
  <div>
    <vue-combogrid
      :data-source="dataSource"
      :width="300"
      :multiple="true"
      :search-field="['name', 'value']"
      @on-select="onSelect"
      @on-remove="onRemove"
      ref="combogrid"
    >
      <template #result="{data}">
        <div class="result-item">{{ data.name }} - {{ data.value }}</div>
      </template>
    </vue-combogrid>
    <button @click="getSelectedValues">获取选中的值</button>
  </div>
</template>

<script>
import VueCombogrid from 'vue-combogrid'

export default {
  components: {
    VueCombogrid
  },
  data() {
    return {
      dataSource: [
        { name: '选项1', value: '1' },
        { name: '选项2', value: '2' },
        { name: '选项3', value: '3' },
        { name: '选项4', value: '4' },
        { name: '选项5', value: '5' }
      ]
    }
  },
  methods: {
    onSelect(data) {
      console.log('选中：', data)
    },
    onRemove(data) {
      console.log('删除：', data)
    },
    getSelectedValues() {
      const selectedValues = this.$refs.combogrid.getSelectedValues()
      console.log('选中的值：', selectedValues)
    }
  }
}
</script>

在上面的代码中，我们使用了以下属性和方法：

- props：
- `data-source`：设置下拉框的数据源。
- `width`：设置下拉框的宽度。
- `multiple`：设置是否可以多选。
- `search-field`：设置搜索字段，即在哪些字段中搜索选项。
- methods：
- `on-select`：选中选项时触发的方法。
- `on-remove`：删除选项时触发的方法。
- `getSelectedValues`：获取选中的值。