VUE：编辑页面并完成更新（同步数据库逻辑），不带请求方法

 

//  编辑所需ID
const editID=ref()
 const showdialog=(item)=>{
  showFloge.value=true
  // 将点编辑获取的当前对象传递出来实现回显
  editID.value=item.objectId
  console.log("打印的id",editID.value)
  edit.name=item.name
  edit.style_name=item.style_name
  edit.house_type=item.house_type

 }

/  编辑逻辑
import { reactive } from 'vue';
import {editLive} from '../../api/live'
const edit= reactive({
  name:'',
  style_name:'',
  house_type:''
})
const editOK=async()=>{
  await editLive(editID.value,edit).then((res)=>{
    ElMessage(res)//提示弹框
    showFloge.value=false
    //完成更新后渲染数据的
    if(res.type=='success'){
      for(let i=0 ;i<=lives.value.length;i++){//遍历找到数据库中被更新数据的数据同步更新
        if(lives.value[i].objectId==editID.value){//找到要更新的数据ID
          lives.value[i]={//对比数据表进行更新
            ...lives.value[i],
            ...edit
          }
          lives.value=[...lives.value]//刷新数组
          return//避免数据太多性能不好，找到更新后马上停
        }
      }
    }

  })
  
}