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

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

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

解决问题后的demo片段:

<el-dialog :append-to-body="true" :destroy-on-close="true" title="编 辑" :visible.sync="sourceTermEditForm" v-if='sourceTermEditForm' width="60%" >
  <avue-form :option="sourceTermEditList" ref="clearnFun" v-model="sourceTermFormEdit" @submit="editSourceTermSubmit"></avue-form>
</el-dialog>
//数据源编辑
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的情况下,会重新渲染一遍页面元素,因此会重新请求数据

猜你喜欢

转载自blog.csdn.net/qq_27751965/article/details/111538049