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

写在前面

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

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

任务拆解

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

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

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

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、编译运行结果如下：

写在最后

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

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