element select下拉框编辑时回显已经删除的数据操作代码

 更新时间:2024年05月17日 10:00:05   作者:肖老师xy  
今天做项目遇到一个棘手的问题,关于element select下拉框编辑时回显问题,下面小编通过实例代码介绍element select下拉框编辑时回显已经删除的数据,感兴趣的朋友跟随小编一起看看吧

element 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回显已经删除的数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS实现很酷的水波文字特效实例

    JS实现很酷的水波文字特效实例

    这篇文章主要介绍了JS实现很酷的水波文字特效,实例分析了javascript操作图层特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • webpack学习笔记之代码分割和按需加载的实例详解

    webpack学习笔记之代码分割和按需加载的实例详解

    本篇文章主要介绍了webpack学习笔记之代码分割和按需加载的实例详解,具有一定的参考价值,有兴趣的可以了解一下
    2017-07-07
  • JS中获取函数调用链所有参数的方法

    JS中获取函数调用链所有参数的方法

    这篇文章主要介绍了JS中获取函数调用链所有参数的方法,本文直接给出代码示例,需要的朋友可以参考下
    2015-05-05
  • js实现图片放大并跟随鼠标移动特效

    js实现图片放大并跟随鼠标移动特效

    这篇文章主要为大家详细介绍了js实现图片放大并跟随鼠标移动特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • JS cookie的设置、读取和删除方法例子

    JS cookie的设置、读取和删除方法例子

    Cookie是客户端存放数据的一种方式,可用来做状态保持,下面这篇文章主要给大家介绍了关于JS cookie的设置、读取和删除方法例子的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • Boostrap中栅格布局的实现

    Boostrap中栅格布局的实现

    这篇文章主要为大家详细解析了Boostrap 栅格布局,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2017-01-01
  • JavaScript中require和import有何区别详解

    JavaScript中require和import有何区别详解

    在真实工作中,估计import和require大家经常见到,如果做前端业务代码,那么import更是随处可见了,这篇文章主要介绍了JavaScript中require和import有何区别的相关资料,需要的朋友可以参考下
    2025-08-08
  • 微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】

    微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】

    这篇文章主要介绍了微信小程序实现动态改变view标签宽度和高度的方法,涉及微信小程序事件响应及使用setData针对data数据动态操作相关实现技巧,需要的朋友可以参考下
    2017-12-12
  • Javascript如何实现对象扁平化实例详解

    Javascript如何实现对象扁平化实例详解

    这篇文章主要给大家介绍了关于Javascript如何实现对象扁平化的扁平化处理简而言之就是对对象中的对象提取出来,放在一个对象里面,形象的说就是把儿子的后代当成自己的儿子,下面相关资料,需要的朋友可以参考下
    2022-11-11
  • JS获取CSS样式(style/getComputedStyle/currentStyle)

    JS获取CSS样式(style/getComputedStyle/currentStyle)

    这篇文章主要为大家介绍了JS获取CSS样式的方法,介绍了CSS样式的三种分类情况,对获取样式做一个简单的封装,感兴趣的小伙伴们可以参考一下
    2016-01-01

最新评论