el-select下拉选择多选去掉输入框

你可以通过设置 `el-select` 组件的 `multiple` 属性为 `true` 来实现多选功能。同时，通过设置 `filter` 属性为 `false` 可以去掉输入框。下面是一个示例代码：

<template>
  <div>
    <el-select multiple filterable="false">
      <el-option label="Option 1" value="1"></el-option>
      <el-option label="Option 2" value="2"></el-option>
      <el-option label="Option 3" value="3"></el-option>
    </el-select>
  </div>
</template>

在上面的示例中，`el-select` 组件具有多选功能，并且没有显示输入框。你可以根据自己的需求添加更多的选项。

相关问题

el-select下拉多选并可编辑

在 `el-select` 中实现下拉多选并可编辑的功能，你可以使用 `multiple` 和 `filterable` 属性结合使用。

首先，在 `el-select` 上设置 `multiple` 属性，这将允许你选择多个选项。然后，设置 `filterable` 属性，这将添加一个可编辑的输入框。

以下是一个示例代码：

<template>
  <div>
    <el-select
      v-model="selectedOptions"
      multiple
      filterable
      placeholder="请选择"
      style="width: 200px"
    >
      <el-option
        v-for="option in options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' },
        // 其他选项...
      ],
      selectedOptions: [],
    };
  },
};
</script>

在这个示例中，`options` 数组包含了所有可选的选项。`selectedOptions` 是一个用于存储用户选择的选项的数组。

通过设置 `multiple` 属性，用户可以选择多个选项。通过设置 `filterable` 属性，用户可以在下拉列表中输入文本进行搜索和编辑。

希望这个示例能够帮助到你！如果你还有其他问题，请随时提问。

el-select 多选时 获取输入框的值

### 获取 `el-select` 多选组件的选择值

在 Element UI 中，对于多选模式下的 `el-select` 组件，可以通过绑定 `v-model` 来获取用户选择的值。当用户选择或取消选择某个选项时，绑定的数据会自动更新。

为了展示具体实现方法，可以查看如下代码示例：

<template>
  <div>
    <!-- 使用 v-model 双向绑定 selectedOptions 数组 -->
    <el-select v-model="selectedOptions" multiple placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>

    <!-- 显示当前选中的值 -->
    <p>您选择了:</p>
    <ul>
      <li v-for="(option, index) in selectedOptions" :key="index">{{ option }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 存储被选中的项
      selectedOptions: [],
      // 下拉菜单数据源
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }]
    };
  }
};
</script>

上述代码展示了如何利用 Vue.js 的双向数据绑定特性，在 `el-select` 组件上设置 `v-model` 属性并将其链接到一个数组变量 `selectedOptions` 上。每当有新的条目被添加或是已有条目被移除时，这个数组都会相应地发生变化[^1]。