尋找寫程式碼感覺(十七)之 查詢功能及修復編輯數據時聯動問題
- 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、編譯運行結果如下:
寫在最後
增刪改查寫完,才感覺算是比較完整的。
整體感受,學習就和打遊戲一樣,真的就是到了一定等級,就會有對應技能,所以我很期待解鎖更多新技能。