elementui select中添加新增标签
在 Element UI 的 Select 组件中添加新建标签,可以通过自定义选项的方式实现。以下是一个简单的示例代码:
<template>
<el-select v-model="value" filterable allow-create placeholder="请选择">
<el-option
v-for="(item, index) in options"
:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
value: '',
options: ['选项1', '选项2', '选项3']
};
}
};
</script>
在这个例子中,filterable
属性允许用户输入来过滤选项,而 allow-create
属性允许用户创建新的选项(即输入的值如果不是选项列表中的现有选项,则可以作为新选项添加到列表中)。用户输入的新值将作为一个新的 el-option
标签被添加到下拉列表中。
请注意,你需要通过 v-model
双向绑定来更新你的数据,新创建的选项将被添加到 options
数组中。如果需要进行额外的逻辑处理,例如在新标签被选中时触发某些操作,可以使用 @change
事件。
评论已关闭