尋找寫程式碼感覺（十七）之 查詢功能及修復編輯資料時聯動問題

久曲健發表於2022-02-05

寫在前面

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

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

任務拆解

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

查詢功能及修復編輯資料聯動問題

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

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

寫在最後

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

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

相關文章