filter-method 在elementUI 表格中的使用

<el-table-column
              prop="pubArea"            // 表格data 中對應的字段
              column-key="pubArea"      // 過濾條件變化時根據此key判斷是哪個表頭的過濾
              label="報修類型"
              align="center"
              width="180"
              :filters="[{text: '公區', value: true}, {text: '住宅', value: false}]"   // 過濾條件
              :filter-method="handleFilterChange"                                    // 過濾方法
              :formatter = 'formatterPubArea'                                          // 根據條件，格式化內容重寫

>

 

 

可以看出報修類型並沒有出現，這是因為prop 的值是一個true 或者false, 需要用 ：formatter  去格式化一下。 

formatterPubArea(row,column){
        console.log(row,column)
        return row.pubArea === true ? '公區' : '住宅'
},
handleFilterChange(value,row){
        // console.log(value,row,column)  有三個參數。根據條件自動刪選。 value 是過濾條件，需要和prop保持一致。
        return row.pubArea === value;       
},

 

現在可以了。

 

 表格其他常用的屬性：

1.  ：fit = true    表格自動撐開 

2.  ：data= 'data'   后台獲取的數據 

3.   sortable   時間進行排序