后台管理中修改数据时原数据回显的解决方案总结。
后台修改数据操作必然会遇到数据回显问题,具体解决思路:
1、每次打开编辑信息的窗口、都重新渲染一次当前窗口、保障组件初始值为当前值
子组件 添加 v-if = ‘someShow’
refresh(){
this.someShow = false
this.$nextTick( () => {
this.someShow = true
} )
}
showEdit() {
this.refresh()
}
2、设一个临时变量、保存当前已选项,
监听页面数据变化、每次将最新变化的值传递给设置的临时变量;
selectProductChange(params) {
this.currentSelectChange = params
},
current: null,
点取消、默认值不变(不做操作)
点确定、将临时变量保存的已操作值传更新为最新默认值,将更新后的默认值再传递给子组件。
保存当前已保存变量。
this.hasSelectListAdd = JSON.parse(JSON.stringify(this.currentSelectChange))
this.packageDefault = _.cloneDeep(this.hasSelectListAdd)
3、子组件到父组件: 数据一变化就将当前值传值给父组件
父组件到子组件: 用刚才保存的值传递给子组件
实现:子组件监听数据变化
watch: {
packageItems(n, o) {
this.$nextTick(() => {
this.echoData()
})
}
},
数据处理是每次第一次渲染子组件、赋值初始值、以后都不赋值此时,保障第一次打开子组件后、再次操作子组件时,不会出现页面每次刷新都出现初始值问题。
修改数据时、原有数据回显。需将拿到的当前数据处理成回显组件需要的数据。
echoData() {
if (!this.hasEcho) {
this.temSelect = _.cloneDeep(this.product_package)
this.hasEcho = true
}
if (this.temSelect.length > 0) {
let hasSelectList = []
this.packageItems.forEach((i, index) => {
this.temSelect.forEach(j => {
if (i.id == j.id) {
hasSelectList.push(index)
return
}
})
})
hasSelectList.forEach(i => {
this.$nextTick(() => {
this.$refs.multipleTableClinicRoom.toggleRowSelection(this.packageItems[i], true)
})
})
}
}