前端后台数据修改时数据回显思路

后台管理中修改数据时原数据回显的解决方案总结。
后台修改数据操作必然会遇到数据回显问题，具体解决思路：

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)
      })
    })
  }
}