vue+antDesign 查詢和修改信息中遇到的問題
最近在公司實習的時候做任務時，遇到了幾個小問題，可能都很簡單，勿噴！
關於搜索功能
- 前端搜索功能(沒有搜索按鈕的情況下)
利用v-if或者v-show，建議v-if（初始渲染消耗相對較小）。
如果生成的列表項或者表格項包含關鍵字（搜索框里的輸入內容），或者關鍵字為“”（注意用==，不判斷類型），那么就讓這個列表項或表格項顯示，反之不顯 示。
<div class="tree" v-if="item.name.includes(keyword) || keyword == ''">
<div class="title">{{item.name}}</div>
<div class="desc">{{item.desc}}</div>
</div>
2. 前端搜索功能(有搜索按鈕的情況下）
我一開始是想通過數組的filter方法來返回找到的對象記錄，但這導致以下問題：
1）原數組被覆蓋：
如果給定的搜索條件比較少，只有1、2個，比如“按名稱查詢”或者“按編號查詢”，那么可以這么寫：
<a-button @click="onSearch">搜索</a-button>
<a-table size="middle" :columns="columns" :data-source="list" rowKey="id" ></a-table>
this.list = this.list.filter(item => item.name == this.queryInfo.name && item.number== this.queryInfo.number);
但是！因為我的table組件綁定的數據源是list，當我把它賦給filter執行返回的結果之后，數據是找到並顯示了，但list也徹底變成了找到后的對象數組，也就是會原本的list被修改了。當我想要再一次查詢其他數據的時候，是查不到的，因為list里面根本沒有其他數據了。
所以要怎么解決這個問題呢？我的想法是在頁面創建的時候把list的值深拷貝一份給另一個臨時變量tempList，然后把table組件的數據源換成tempList。當查詢完之后，自動清空搜索框內容，並且在搜索框內容為空的時候，把list的值再深拷貝一份賦給tempList。
<a-button @click="onSearch">搜索</a-button> <a-table size="middle" :columns="columns" :data-source="tempList" rowKey="id" ></a-table>
data(){ return { list: [], tempList: [], queryInfo: {} } }, created(){ this.tempList = JSON.parse(JSON.stringify(this.list)); } methods: { onSearch(){ if(this.queryInfo.name == "" && this.queryInfo.number== ""){ this.tempList = JSON.parse(JSON.stringify(this.list)); }else{ this.tempList = this.list.filter(item => item.name == this.queryInfo.name && item.number == this.queryInfo.number) } } }
但在這樣就得保證每搜索一次就得清空一次搜索內容，感覺不大好......辦法也是個笨辦法，原諒我學藝不精！
3. 多條件查詢
一般會提供一個獲取列表的接口，參數包含返回顯示數據的頁數，每頁的數據數以及查詢參數。這個時候就可以在點擊“搜索”按鈕的時候把已填寫的條件表單作為查詢參數調用該接口，后端來查詢，不用做前端查詢。
關於彈框modal傳值
比如修改用戶，點擊表格中某一行記錄的“修改”按鈕，彈出彈框，彈框內有表單，用來收集修改后的用戶信息，然后點擊“確定”，驗證通過后關閉彈框，並返給表格頁面新的修改數據。
因為modal組件有一個footer屬性，，里面有“確定”跟“取消”按鈕，我一開始用了這個屬性，但是后面發現，在表格頁面中我無法獲取到彈框頁面的修改數據，也不能控制彈框的顯示狀態，甚至不能通過 $refs 獲取到彈框內的這個表單元素，自然就不能做表單驗證和重置，即使用emit，也找不到觸發時機，而且表單驗證跟重置無法實現，所以很麻煩。
后面我通過參考他人的代碼，發現可以去掉footer屬性，然后在彈框頁面再加一個“確定”和“取消”按鈕，在它們身上綁定相應事件，就可以實現表單驗證和重置，再通過 $emit 把 form數據和彈框顯示狀態傳出去，父組件來控制彈框顯示，問題就解決了。
<!--
表格列表組件內部
-->
<a-modal v-model="modal" title="title" :footer="null">
</a-modal>
<!-- 彈框組件內部 --> <a-row type="flex" justify="end" align="middle"> <a-space> <a-button @click="onCancel">取消</a-button> <a-button type="primary" @click="onSubmit">確定</a-button> </a-space> </a-row>