本文介绍在Element UI的Select组件中,编辑表单时如何正确处理已删除数据的回显问题。通过示例代码展示如何确保下拉框在数据被删除后仍能正确显示原有值,避免用户看到无效选项。
Element UI Select回显已删除数据问题
在使用Element UI的Select组件时,可能会遇到编辑表单时回显已删除数据的问题。具体解决方案如下所示:
代码实现示例
<el-form-item label="是否激活" prop="activationId">
<el-select
v-model="formParams.activationId"
style="width: 140px"
clearable
placeholder="请选择"
>
<el-option
v-for="item in activationList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
<el-option
v-if="!activationList.some(list=> list.id === formParams.activationId)&&formParams.activationId!==''"
:label="formParams.activationName"
:value="formParams.activationId"
/>
</el-select>
</el-form-item>
export default {
data () {
return {
formParams:{
//回显被删除的id
activationId:1,
//回显被删除的name
activationName: '已激活'
},
activationList: [
//此处注释掉,假设第一条数据被删除
//{id: 1, name: '已激活'},
{id: 0, name: '未激活'}
]
}
}
}
总结与参考
以上就是解决Element Select下拉框编辑时回显已删除数据的方法。更多关于Element Select回显已删除数据的内容,您可以搜索本站以前的文章或继续浏览下面的相关文章。希望大家以后多多支持本站!