javaweb VUE+ElementUI 分頁組件設置 前端部分

1 前端操做

在前端頁面上使用ElementUI實現分頁組件

1.1 組件佈局代碼

1.2 組件觸發事件代碼

組件的兩個事件是固定使用且必須使用的，可是要注意如下幾點：

1. 兩個觸發事件綁定的函數不能加括號，這會致使事件傳給回調函數的值出錯。
2. 在VUE的methods下編寫兩個事件的觸發函數時記得寫參數
3. 頁碼設置的每頁顯示幾條和用戶須要跳轉的新頁面要存在VUE的data中，而且執行一次查詢數據，對頁面的數據進行更新
   注意除了queryInfo裏的，外面還得設置三個初值用於分頁組件的頁面顯示
4. VUE的data數據很簡單，分頁初始值放外面，用戶錄入的信息全放一個json對象中，請求類型就定爲show，用戶不錄入數據時，這些數據默認爲空。
   調用查詢方法時若是傳入這個queryInfo，那就只會對應一個叫show的方法，此時是查全部仍是進行某種條件查詢，全看queryInfo中哪些數據不爲空，dao中會進行判斷而後追加到sql的where後
   

1.3 頁面更新的查詢語句

①注意圖中三條代碼，回傳數據的方式
②寫的這個方法封裝好了，若是沒傳值直接調用，就會把vm.queryInfo（上面的圖）做爲請求參數傳過去
其餘地方調用這個方法時，一般會傳入」type:方法名「 這種鍵值對，這就改變了後端要執行的方法；也能夠傳一個json，裏面帶上一個type鍵值對就行。