文章目錄
- 前言
- 代碼實現
- AI
- 個人
- 總結
前言
因為table需要編輯，所以如果從后端拿數據，編輯后篩選數據就會丟失。這時候就需要前端一次性拿到所有數據進行過濾，數據進行淺拷貝，以便過濾后的數據修改之后，同步修改總數居，保存的時候直接保存所有數據。
個人寫的版本不算是完整遞歸，就想搞個遞歸版本，就用AI寫了一個（https://code.fittentech.com/try）這個可以直接內嵌vscode，但他寫的我運行不起來，做了些修改才能正常運行，突然就感覺ai暫時還替代不了我呀，哈哈哈
代碼實現
AI
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>前端模糊查詢示例</title><style>ul {list-style-type: none;padding: 0;}li {padding: 8px;background-color: #f9f9f9;margin-bottom: 2px;}li.match {background-color: #e7f3fe;}</style>
</head>
<body><input type="text" id="searchInput1" placeholder="請輸入查詢內容..."><input type="text" id="searchInput2" placeholder="請輸入查詢內容..."><ul id="searchList"><li>蘋果 - 紅色</li><li>香蕉 - 黃色</li><li>橙子 - 橙色</li><li>葡萄 - 紫色</li><li>西瓜 - 綠色</li></ul>// 這里是我加的，不然只能搜索一次<ul id="searchList1" style='display:none'><li>蘋果 - 紅色</li><li>香蕉 - 黃色</li><li>橙子 - 橙色</li><li>葡萄 - 紫色</li><li>西瓜 - 綠色</li></ul><script>document.getElementById('searchInput1').addEventListener('blur', function() {updateResults();});document.getElementById('searchInput2').addEventListener('blur', function() {updateResults();});function updateResults() {const query1 = document.getElementById('searchInput1').value.toLowerCase();const query2 = document.getElementById('searchInput2').value.toLowerCase();const allItems = Array.from(document.getElementById('searchList1').getElementsByTagName('li'));const list = document.getElementById('searchList');list.innerHTML = ''; // 清空原有列表內容recursiveFilter(allItems, [query1, query2], function(filteredItems) {/**我把清除列表寫在這里的，因為recursiveFilter里的callback會被重復調用const list = document.getElementById('searchList');list.innerHTML = ''; // 清空原有列表內容*/filteredItems.forEach(item => {const li = document.createElement('li');li.textContent = item.textContent;li.classList.add('match');list.appendChild(li);});// 這個返回也是我加的，因為不加返回的話，recursiveFilter方法里的return之后拿不到數據艾，filteredRest會為undefined// return filteredItems;});}function recursiveFilter(items, queries, callback) {if (items.length === 0) {return callback([]);}const [first, ...rest] = items;const filteredRest = recursiveFilter(rest, queries, callback);if (queries.some(query => query && first.textContent.toLowerCase().includes(query))) {// return callback([first, ...filteredRest]);return [first, ...filteredRest];} else {// return callback(filteredRest);return filteredRest;}}</script>
</body>
</html>
個人
tempArrFun(table, obj) {// 如果沒有查詢該條件則返回所有，因為searchObj會有page之類的分頁參數if (!this.searchObj[obj]) {return table;}return table.filter(item => {if (item[obj]) {if (item[obj].includes(this.searchObj[obj])) return true;return false;}// 是否取空值return false;});},handleSearch(obj) {this.allSearchTable = [];this.searchObj = Obj;let tempArr = [];this.searchInfo.forEach((obj, index) => {if (index === 0) {tempArr = this.tempArrFun(this.allTableData, obj.CODE);} else {tempArr = this.tempArrFun(tempArr, obj.CODE);}if (index === this.searchInfo.length - 1) {this.allSearchTable = tempArr;}});}總結
簡單記錄一下，用ai寫代碼的情況。不擅長單元測試，我要用ai做單元測試，突然發現以前的想法還是很正確（任何時候創意才是最值錢的）
)
)