有关可编辑单元格问题

来源:6-7 表格组件-实现可编辑单元格功能

johnny_2008

2023-02-02

老师您好,
请问,如何做到在点击单元格时,在输入框修改数据后,不点击确认图标的情况时,再点击其他单元格后,上次修改的单元格数据不同步更新呢?也就是说修改任意单元格的数据,只要不点击确认,单元格的数据始终不会更新

查看日志,props.data始终和 tableData保持同步

// 拷贝一份表格的数据
let tableData = ref<any[]>(cloneDeep(props.data));

解决了,需要修改如下代码

let stopWatchData = watch(
  () => props.data,
  (val) => {
    watchData.value = true;
    tableData.value = val; // 需要 cloneDeep 
    tableData.value.map((item) => {
      item.rowEdit = false;
    });
    if (watchData.value) stopWatchData();// 删除此行代码,因为翻页后数据不能同步
  },
  { deep: true } // 修改 deep:false 是否可以只监听 props.data 值的变化,请老师赐教
);
写回答

1回答

五月的夏天

2024-12-30

这样需要单独再拷贝一发源数据,先将源数据保存下来,然后再根据点击的区域做判断,如果没有点击确认,则将拷贝的数据赋值给编辑的数据

0
0

基于Vue3+Vite+TS,二次封装element-plus业务组件

集成大量实际样例,系统掌握前沿技术栈与二次组件库封装能力

448 学习 · 202 问题

查看课程