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

发布时间：2023-07-06 16:02:31 修改时间：2023-07-06 16:02:31 阅读：2336 评论：0 0

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的情况下，会重新渲染一遍页面元素，因此会重新请求数据

---