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