尋找寫程式碼感覺(十七)之 查詢功能及修復編輯數據時聯動問題

寫在前面

新增、編輯、刪除功能都整完了,目前還差個查詢功能。

當然,還存在一個很嚴重的問題。就是編輯修改當前行數據時是聯動的,點取消,也會被修改,這顯然是不對的,如下圖所示:

任務拆解

  • 前端增加按名稱查詢
  • 修復編輯數據的聯動問題

查詢功能及修復編輯數據聯動問題

找到問題後,就是想解決方案了,這時肯定是沒有後端的事了,重心在前端即可。

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、編譯運行結果如下:

寫在最後

增刪改查寫完,才感覺算是比較完整的。

整體感受,學習就和打遊戲一樣,真的就是到了一定等級,就會有對應技能,所以我很期待解鎖更多新技能。