标签：十七 record 查询 编辑 json 联动 queryParam

写在前面

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

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

任务拆解

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

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

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

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

写在最后

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

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。