寻找写代码感觉（十七）之 查询功能及修复编辑数据时联动问题

• 2022 年 2 月 5 日
• 笔记
• Spring Boot, vue3

写在前面

新增、编辑、删除功能都整完了，目前还差个查询功能。

当然，还存在一个很严重的问题。就是编辑修改当前行数据时是联动的，点取消，也会被修改，这显然是不对的，如下图所示：

任务拆解

• 前端增加按名称查询
• 修复编辑数据的联动问题

查询功能及修复编辑数据联动问题

找到问题后，就是想解决方案了，这时肯定是没有后端的事了，重心在前端即可。

1、增加按名称查询

就是前端加个查询功能，并调用查询接口，示例代码如下：

    <a-form layout="inline">
        <a-form-item>
          <a-input v-model:value="queryParam.name" placeholder="名称">
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleQuery({page: 1, size: pagination.pageSize})">
            查询
          </a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="add">
            新增
          </a-button>
        </a-form-item>
      </a-form>
   const queryParam = ref();
   queryParam.value = {};
   return{
     queryParam
   }

2、修复编辑数据的联动问题

编辑时复制对象,不影响当前数据即可，示例代码如下：

   /**
     * 编辑
     * @param record
     */
    const edit = (record: any) => {
      modalVisible.value = true;
      ebooks_data.value = Tool.copy(record);
    };

知识点：

• handleQuery方法、queryParam参数都需要返回给html调用，所以需要加到return中
• 实现动态，需要使用ref进行数据绑定
• js对象复制：将json对象转为json字符串，再转回json对象

3、编译运行结果如下：

写在最后

增删改查写完，才感觉算是比较完整的。

整体感受，学习就和打游戏一样，真的就是到了一定等级，就会有对应技能，所以我很期待解锁更多新技能。