<template>
<div class="dynamic
-select">
<!
-- Element
-UI 下拉选择器
-->
<el
-select
v
-model="selectedValue"
:placeholder="placeholder"
filterable
clearable
@change="handleSelectChange"
:disabled="disabled"
style="width: 100%"
>
<el
-option
v
-for="(item, index) in options"
:key="index + item.value"
:label="item.label"
:value="item.value"
/>
</el
-select>
<!
-- 新增选项输入框 + 确认按钮
-->
<div class="add
-option">
<el
-input
v
-model="newOption"
placeholder="输入新选项"
clearable
@keyup.enter.native="handleAddOption"
:disabled="disabled"
class="add
-input"
/>
<el
-button
type="primary"
icon="el
-icon
-plus"
size="mini"
@click="handleAddOption"
:disabled="!newOption.trim() || disabled"
>
新增
</el
-button>
</div>
</div>
</template>
<script>
export default {
name: 'DynamicSelect',
props: {
// 选项列表（必填）
options: {
type: Array,
required: true,
default: () => []
},
//
绑定值（支持 v
-model）
value: {
type: [String, Number, Array],
default: ''
},
// 占位符
placeholder: {
type: String,
default: '请选择'
},
// 是否禁用
disabled: {
type: Boolean,
default: false
}
},
data() {
return {
selectedValue: this.value, // 双向
绑定选中值
newOption: '' //
新增选项的输入内容
}
},
watch: {
// 监听父组件传入的 value，同步到内部 selectedValue
value(newVal) {
this.selectedValue = newVal
},
// 监听内部选中值变化，同步到父组件
selectedValue(newVal) {
this.$emit('input', newVal)
this.$emit('change', newVal)
}
},
methods: {
// 选中值变化
时触发（可选）
handleSelectChange(val) {
this.$emit('select
-change', val)
},
//
新增选项逻辑
handleAddOption() {
const label = this.newOption.trim()
if (!label) {
this.$message.warning('请输入有效内容！')
return
}
// 检查是否已存在相同选项
const isExist = this.options.some(item => item.label === label)
if (isExist) {
this.$message.warning('该选项已存在！')
return
}
// 生成唯一值（可根据需求自定义，如 UUID、
时间戳等）
const value = Date.now() // 简单用
时间戳作为唯一值
// 更新选项列表
this.options.push({ label, value })
// 选中
新增的选项
this.selectedValue = value
// 清空输入框
this.newOption = ''
// 通知父组件选项已更新（可选）
this.$emit('options
-updated', this.options)
this.$message.success('
新增选项成功！')
}
}
}
</script>
<style scoped>
.dynamic
-select {
display: flex;
align
-items: center;
gap: 8px;
}
.add
-option {
display: flex;
align
-items: center;
gap: 4px;
}
.add
-input {
width: 140px;
}
</style>
完善
新增功能，并附上
使用范例
本文探讨了在Vue框架中，如何正确地更新DOM以反映数据的变化。特别是在使用Ajax调取数据并需要对列表项添加新属性时，直接修改属性可能不会立即更新视图。文章分享了一种有效的方法，通过Vue.set()函数来确保DOM的实时更新。
扫一扫
4711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
