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

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

时间: 2025-01-10 15:50:47 浏览: 99

### 获取 `el-select` 多选组件的选择值在 Element UI 中，对于多选模式下的 `el-select` 组件，可以通过绑定 `v-model` 来获取用户选择的值。当用户选择或取消选择某个选项时，绑定的数据会自动更新。为了展示具体实现方法，可以查看如下代码示例： ```vue <template> <div>  <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]。

阅读全文