【elementUI系列】elementUI中表格的【篩選功能】和【排序功能】同時使用

1、前言

最近在寫項目的時候，發現本身對elementUI的表格，本身想吐槽一下table的組件，多是沒有理解透文檔中的說明使用。

2、需求

要作成這樣的：

而後左側還有一個相似於導航的切換，也能夠是tab切換。左側是查數據庫的，右側也是查數據庫的。

3、分析

寫代碼前分析一下：

（1）我打算左側使用tab切換。緣由：這個數據之間有關聯，分隔內容。用導航有點大材小用。

（2）右側的部分打算封裝成組件，由於每個tab的內容和數據很類似。這樣也是前端的組件高複用，模塊化開發，並且左側導航是後端控制的，多少條不知道。

4、封裝組件，父組件傳值給子組件

子組件和父組件之間的通訊，記住父傳子：props屬性，子傳父：this.$emit()方法，兄弟傳兄弟，用vuex。

組件的佈局分紅三部分：介紹，表格，分頁。

一、子組件

父組件給子組件傳值，在組件上使用props屬性，接受父組件傳遞的值。

二、父組件

那麼父組件是怎麼傳的呢？看下圖

父組件的佈局

這個是父組件，紅框內容就是父組件傳值方式，父組件在本身本地須要定義後邊的parentData，後邊的tableData。前邊是傳給子組件的接受名。

父組件的data

5、封裝組件，子組件傳值給父組件

爲啥子組件還須要給父組件傳值，由於子組件的操做改變了數據，對父組件形成了影響。

咱麼這個需求中，也是能夠選擇子組件不給父組件傳值的，直接改變子組件中改變父組件傳遞過來的值。咱們就當複習一下父子組件傳值。

好比分頁這個功能，子組件須要將第幾頁傳給父組件。

子組件的pageChange方法：

pageChange(val) {
      this.middleData.pageNum = val;
      this.$emit('childData', this.middleData)
    },

那父組件是怎麼接受這個頁碼的呢？

childData (val) {
      this.paramsData.orderBy = val.orderBy;
      this.paramsData.dir = val.dir;
      this.paramsData.dimension = val.dimension;
      this.queryData();
    }

上述childData方法中父組件方法，參數就是子組件傳遞的數據。

6、子組件的表格的【篩選功能】和【排序功能】

一、咱們先看【排序功能】

看一下官方文檔：

我是須要後端配合使用，遠程排序。因此必須設置custom。而後配合sort-change方法。否則就是前端排序

咱們來看一下sortChang方法：

sortChange (column, event) {
      this.middleData.orderBy = column.prop;
      if(column.order =='ascending'){this.middleData.dir = 'asc'}else if(column.order =='descending'){this.middleData.dir = 'desc'}else{this.middleData.dir = ''};
      this.$emit('childData', this.middleData)
    },

將查詢的參數傳遞給父組件。

二、咱們再看【篩選功能】

咱們看一下官方文檔：

table的cloumn須要設置兩個屬性：column-key，filters。

table須要設置一個方法filter-change。

咱們再來看一下具體handleFilterChange實現

handleFilterChange (value) {
      if(value.introduce.length === 1){
        if(value.introduce[0] == '身份證'){this.middleData.dimension = '1'}else if(value.introduce[0] == '手機號'){this.middleData.dimension = '2'}else{this.middleData.dimension = ''}
      }else{
        this.middleData.dimension = '';
      }
      this.$emit('childData', this.middleData)
    }

爲啥我要作判斷呢，由於我是使用filters屬性會返回一個數組。我須要判斷作一個格式轉換。這個是和後端約定的。而後將查詢接口數據傳遞給父組件，父組件的方法就會馬上執行。

注意的地方：

【篩選功能】官方文檔和例子用了這個方法來篩選，可是這個是前端的篩選，不要用這個方法。

【排序功能】官方這個方法，是專門對錶頭點擊，可是這個會和sort-change方法一次觸發兩個方法或者多個方法。

【注：歡迎關注，我是saucxs，也叫songEagle，鬆寶寫代碼，文章首發於sau交流學習社區 https://www.mwcxs.top），關注咱們天天閱讀更多精彩內容】