用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中删除按钮删除被选了得值后面能选删除的值

对于多选下拉框，可以通过在选项中添加一个 `disabled` 属性来实现被选中的选项在下拉框中不能再次被选中。可以通过监听下拉框的 `change` 事件，在选中某个选项时，判断该选项是否已经被选中，如果已经被选中，则将该选项的 `disabled` 属性设置为 `true`，使其在下拉框中不能再次被选中。

在删除按钮的点击事件中，可以将被删除选项的 `disabled` 属性设置为 `false`，使其在下拉框中可以再次被选中。具体实现可以参考以下代码：

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
  </template>
</el-table-column>

<el-table-column label="多选下拉框">
  <template slot-scope="scope">
    <el-select v-model="scope.row.selectedOptions" multiple>
      <el-option v-for="option in options" :label="option.label" :value="option.value" :disabled="option.disabled">{{ option.label }}</el-option>
    </el-select>
  </template>
</el-table-column>

data() {
  return {
    options: [
      { label: '选项1', value: 'option1', disabled: false },
      { label: '选项2', value: 'option2', disabled: false },
      { label: '选项3', value: 'option3', disabled: false },
      { label: '选项4', value: 'option4', disabled: false },
    ],
    tableData: [
      { selectedOptions: [], ... },
      { selectedOptions: [], ... },
      { selectedOptions: [], ... },
    ]
  }
},
methods: {
  handleDelete(row) {
    for (let option of this.options) {
      if (row.selectedOptions.includes(option.value)) {
        option.disabled = false;
      }
    }
    this.tableData.splice(this.tableData.indexOf(row), 1);
  }
}

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