avue框架使用element-ui的dialog引发的问题及解决办法

news/2024/7/10 1:33:08 标签: vue, javascript, html, avue

dialog中的内容多次打开不更新问题

ahtml" title=vue>vue框架使用element-ui的dialog引发:
1、ahtml" title=vue>vue-form表单的多级联动,编辑时赋值异常。
2、dialog中的表单重置异常(重置为第一次加载的表单内容缓存)
3、dialog中表单的内容不更新问题,如果是子组件加载,会出现无法在created中监听父级传参,需要whatch中监听,才可能正常获取数据,不仅麻烦,而且没必要。
正常编辑每条数据的内容,

解决问题后的demo片段:

html" title=javascript>javascript"><el-dialog :append-to-body="true" :destroy-on-close="true" title="编 辑" :visible.sync="sourceTermEditForm" v-if='sourceTermEditForm' width="60%" >
  <ahtml" title=vue>vue-form :option="sourceTermEditList" ref="clearnFun" v-model="sourceTermFormEdit" @submit="editSourceTermSubmit"></ahtml" title=vue>vue-form>
</el-dialog>
html" title=javascript>javascript">//数据源编辑
sourceTermEditList: {
    labelWidth: 110,
    emptyText:'重置',
    column:[
        {
            label:'数据源名称',
            prop:'name',
        },
        {
            label:'采集器',
            prop:'collectorId',
            type:'select',
            cascaderItem: ['channelId'],
            cascaderChange:true,
            dicUrl: "/api/collector/list/"+this.proId,
            dicMethod:'get',
            dicFormatter:(res)=>{
                return res.data.list;//返回字典的层级结构
            },
            props: {
                label: "sn",
                value: "id"
            },
            rules: [{
                required: true,
                message: "请填写采集器",
                trigger: "click"
            }]
        },
        {
            label:'通道',
            prop:'channelId',
            type:'select',
            dicUrl: `/api/collector/channel/list/{{key}}`,
            dicFlag:false,
            dicMethod:'get',
            cascaderIndex:0,
            dicFormatter:(res)=>{
                return res.data.list;//返回字典的层级结构
            },
            props: {
                label: "physicalNumber",
                value: "id"
            },
            rules: [{
                required: true,
                message: "请选择通道",
                trigger: "click"
            }]
        }
    ]
},
sourceTermFormEdit:{},

重点解决代码:v-if属性控制渲染

解释:v-if的显隐控制会使内部元素加载的同时重新渲染dom及data
原因:加载v-if之后,在每次加载modal的情况下,会重新渲染一遍页面元素,因此会重新请求数据


http://www.niftyadmin.cn/n/1065195.html

相关文章

Javascript面向对象编程(三):非构造函数的继承

阮一峰的网络日志 首页 档案上一篇&#xff1a;Javascript面下一篇&#xff1a;上海的酸雨 分类&#xff1a; JavaScriptJavascript面向对象编程&#xff08;三&#xff09;&#xff1a;非构造函数的继承 作者&#xff1a; 阮一峰 日期&#xff1a; 2010年5月24日 这个…

AFNetworking Property with 'retain (or strong)' attribute must be of object type

由于sdk低于6.0时&#xff0c;dispatch_queue_t ARC没有托管&#xff0c;出现提示错误&#xff0c;修改为&#xff1a; #if OS_OBJECT_USE_OBJCproperty (nonatomic, strong) dispatch_queue_t completionQueue;#elseproperty (nonatomic, assign) dispatch_queue_t completio…

router页面缓存

一、设置标签 //App.vue 标签 <keep-alive><router-view v-if"this.$route.meta.keepAlive" /> </keep-alive> <router-view v-if"!this.$route.meta.keepAlive"></router-view>二、设置路由 // routes 配置 export defau…

js:大转盘抽奖游戏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.org/1999/xhtml"><head> <title>js抽奖</title> …

11_控制线程_多线程同步

【线程安全问题例子】 模拟售票案例&#xff0c;4个窗口售票&#xff0c;总共100张票。 public class Demo {public static void main(String[] args) {SaleThread sanew SaleThread();Thread t1new Thread(sa);Thread t2new Thread(sa);Thread t3new Thread(sa);Thread t4new …

element-ui dialog弹窗增加全屏功能

完成效果图&#xff1a; 一、定义全局变量 dialogFull 用来控制弹窗 dialogFull:false,二、dialog标签添加全局属性绑定 :fullscreen"dialogFull"三、设置title区域的自定义 <template slot"title"><div class"avue-crud__dialog__header…

intent大全【转】

1.从google搜索内容Intent intent new Intent();intent.setAction(Intent.ACTION_WEB_SEARCH);intent.putExtra(SearchManager.QUERY,"searchString")startActivity(intent); 2.浏览网页Uri uri Uri.parse("http://www.google.com");Intent it new Int…

Atitit USRqc62204 证书管理器标准化规范

Atitit USRqc62204 证书管理器标准化规范 /atiplat_cms/src/com/attilax/cert/CertSrv4mv.java /** * */ package com.attilax.cert; import java.io.File; import java.util.Date; import com.attilax.device.HardWareUtils; import com.attilax.io.FileExistEx; import com.…