用vue multiple写个多选下拉框

当然可以，以下是代码示例：

<template>
  <div>
    <select v-model="selected" multiple>
      <option v-for="option in options" :key="option.value" :value="option.value">
        {{ option.text }}
      </option>
    </select>
    <p>Selected: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { text: 'Option 1', value: '1' },
        { text: 'Option 2', value: '2' },
        { text: 'Option 3', value: '3' },
        { text: 'Option 4', value: '4' },
      ],
    };
  },
};
</script>

此代码使用 Vue 的 v-model 和 multiple 属性创建多选下拉框，选项通过循环展示出来，用户可以选择多个选项，然后会在底部显示选中的选项。

相关问题

vue element table中多选下拉框,下拉框有一个选了后面不能在选前面选的值,通过table中删除按钮删除被选了得值后面能选删除的值

实现这个功能可以通过以下步骤:

1. 在 table 中定义一个多选列，并在该列中使用 `el-select` 组件来显示下拉框。

2. 在 `el-select` 组件中使用 `v-model` 绑定一个数组，用于存储被选中的选项。

3. 在 `el-select` 组件中使用 `filterable` 属性开启搜索功能，让用户可以快速找到需要的选项。

4. 在 `el-select` 组件中使用 `filter-method` 属性定义一个自定义的过滤函数，用于根据条件筛选选项列表。

5. 在 `el-select` 组件中使用 `before-dropdown-toggle` 事件，当下拉框被展开或收起时触发该事件，可以在该事件中动态更新选项列表。

6. 在 `el-table-column` 组件中定义一个删除按钮，并使用 `scope` 属性传递当前行的数据对象。

7. 在删除按钮的点击事件中，从被选中的选项数组中移除当前行的数据对象。

8. 在 `before-dropdown-toggle` 事件中检查当前行的数据对象是否在被选中的选项数组中，如果存在，则从选项列表中排除该选项，使其不能再次被选中。

下面是一个示例代码实现：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column label="爱好">
      <template slot-scope="scope">
        <el-select v-model="scope.row.hobbies"
                   multiple
                   filterable
                   :filter-method="filterHobbies"
                   @before-dropdown-toggle="updateHobbiesOptionList">
          <el-option v-for="option in hobbiesOptionList"
                     :key="option"
                     :label="option"
                     :value="option"
                     :disabled="disabledHobbiesOptionList.includes(option)">
          </el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button type="danger"
                   icon="el-icon-delete"
                   @click="removeTableRow(scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, hobbies: ['游泳', '读书'] },
        { name: '李四', age: 20, hobbies: ['唱歌', '跳舞'] },
        { name: '王五', age: 22, hobbies: ['旅游', '电影'] }
      ],
      hobbiesOptionList: ['游泳', '读书', '唱歌', '跳舞', '旅游', '电影'],
      disabledHobbiesOptionList: []
    }
  },
  methods: {
    filterHobbies(value, option) {
      return option.toLowerCase().indexOf(value.toLowerCase()) !== -1
    },
    updateHobbiesOptionList(visible) {
      if (visible) {
        this.disabledHobbiesOptionList = []
        this.tableData.forEach(row => {
          row.hobbies.forEach(hobby => {
            if (!this.disabledHobbiesOptionList.includes(hobby)) {
              this.disabledHobbiesOptionList.push(hobby)
            }
          })
        })
      }
    },
    removeTableRow(row) {
      const hobbies = row.hobbies
      const index = hobbies.findIndex(item => item === row)
      if (index !== -1) {
        hobbies.splice(index, 1)
      }
    }
  }
}
</script>

在上面的代码中，我们使用 `el-select` 组件来实现下拉框，并使用 `v-model` 绑定一个数组 `row.hobbies`，用于存储选中的选项。我们使用 `filterable` 属性开启搜索功能，并使用 `filter-method` 属性定义一个自定义的过滤函数。在 `before-dropdown-toggle` 事件中，我们使用 `updateHobbiesOptionList` 方法来动态更新选项列表，并使用 `disabledHobbiesOptionList` 数组来存储不能再次被选中的选项。在删除按钮的点击事件中，我们使用 `removeTableRow` 方法从选项数组中移除当前行的数据对象。

用 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`：获取选中的值。