el-select增减动态值
时间: 2023-11-23 19:53:31 浏览: 76
el-select可以通过v-model绑定一个数组来实现多选,而这个数组就是动态的值。可以通过在methods中定义一个函数来动态增减这个数组的值,从而实现el-select的动态增减值。例如:
```
<el-select v-model="selectedOptions" multiple>
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
export default {
data() {
return {
options: [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' }
],
selectedOptions: []
}
},
methods: {
addOption() {
this.selectedOptions.push('option4');
},
removeOption() {
this.selectedOptions.pop();
}
}
}
```
在上面的例子中,我们定义了一个el-select,它的选项是options数组中的三个选项。同时,我们定义了一个selectedOptions数组来绑定el-select的值。在methods中,我们定义了两个函数addOption和removeOption来动态增减selectedOptions数组的值。当我们调用addOption函数时,会将'option4'添加到selectedOptions数组中,从而在el-select中增加一个选项。当我们调用removeOption函数时,会将selectedOptions数组中的最后一个元素弹出,从而在el-select中删除一个选项。
阅读全文