其他分享
首页 > 其他分享> > 寻找写代码感觉(十七)之 查询功能及修复编辑数据时联动问题

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

作者:互联网

写在前面

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

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

任务拆解

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

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

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

知识点:

3、编译运行结果如下:

写在最后

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

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

标签:十七,record,查询,编辑,json,联动,queryParam
来源: https://www.cnblogs.com/longronglang/p/15864725.html