element-ui关于el-select选择框多选出框外的解决

### 使用 Vue 和 Element-UI 中 `el-select` 组件获取选中内容 在 Vue 及其生态系统下操作 DOM 或者组件状态时，推荐采用声明式的编程方式[^1]。对于 `el-select` 组件而言，通过绑定 v-model 到数据属性上可以轻松实现双向数据绑定，从而跟踪用户的选项变化。 下面是一个简单的例子来展示如何使用 `v-model` 来获得 `el-select` 的当前选择： ```html <template> <div id="app"> <!-- el-select 绑定 value --> <el-select v-model="selectedValue" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <!-- 显示已选择的内容 --> <p>您选择了: {{ selectedValue }}</p> </div> </template> <script> export default { name: "App", data() { return { // 初始化为空字符串或其他默认值 selectedValue: '', options: [ { value: 'option1', label: '黄金糕' }, { value: 'option2', label: '双皮奶' }, { value: 'option3', label: '蚵仔煎' } ] }; } }; </script> ``` 当用户从下拉列表中做出选择后，`selectedValue` 将自动更新为所选项目的值，并且页面上的 `<p>` 标签也会相应地显示最新的选择结果。 如果需要手动访问或更改这个值（比如响应某些事件），可以直接操作 `this.selectedValue` 属性即可。需要注意的是，在处理数组类型的变更时要遵循特定的方式以确保这些变更是可被侦测到的[^2]。