鍍金池/ 問答/HTML/ element ui 如何簡潔地實現(xiàn)表格的搜索功能

element ui 如何簡潔地實現(xiàn)表格的搜索功能

圖片描述

想輸入某一個人名或日期時能顯示想要的那一條信息(這個表格里的數(shù)據(jù)是用easy-mock模擬的)。
還有怎么過濾表格里全部的數(shù)據(jù)而不是只過濾當前頁面的數(shù)據(jù)

回答
編輯回答
維他命

取決于你本來的表格數(shù)據(jù)是怎么拿的:

  1. 如果是一次性拿所有數(shù)據(jù),那就在前端進行過濾,數(shù)組有filter方法,過濾完后重新把數(shù)據(jù)綁定到表格
  2. 如果拿的數(shù)據(jù)是動態(tài)的,那就只能在點擊【搜索】按鈕時發(fā)送請求給后端,然后重新綁定到表格并顯示

本覺得這個問題實在太簡單,而且回答已經(jīng)很清楚了,看到又更新了一遍問題,你這個估計是完全不懂前端...

你賦值給element ui的tableData
對tableData進行修改,改完再重新賦值。
如:

//獲取的日期與名稱假設為: searchData
let resultData = tableData.filter(data=>{
    //日期假設date,人名 name
    if(data.date == searchData|| data.name.indexOf(searchData) != -1){ //此處根據(jù)具體需求判斷
        return true;
    }
});
//再把resultData 賦值給element ui組件就可以了。且這個不存在當前頁面的問題,一般過濾都是拿全部數(shù)據(jù)過濾
2017年3月5日 07:35