寻找写代码感觉(十七)之 查询功能及修复编辑数据时联动问题
作者:互联网
写在前面
新增、编辑、删除功能都整完了,目前还差个查询功能。
当然,还存在一个很严重的问题。就是编辑修改当前行数据时是联动的,点取消,也会被修改,这显然是不对的,如下图所示:
任务拆解
- 前端增加按名称查询
- 修复编辑数据的联动问题
查询功能及修复编辑数据联动问题
找到问题后,就是想解决方案了,这时肯定是没有后端的事了,重心在前端即可。
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