六、篩選:也叫作“過濾”。

1、啓動對列數據取值的篩選:
(1)使用<el-table-column>標記對的filters屬性:
取值是對象數組。

  <el-table-column prop=“sex” :filters=[{},{}]>
  {text:‘男生’,value:‘男’},{text:‘女生’,value:‘女’}
  text - 設置在篩選框出現的文本提示。
  value - 設置指定篩選項進行篩選的字段取值。

(2)使用<el-table-column>標記對的filter-method屬性。
取值是函數。

     <el-table-column :filter-method=“filterMethod”>
     filterMethod(value,row,column){
       //value - 用戶選中篩選項的vlaue屬性
       //row - 行,可以引用列分量
       //column - 列,可以引用列屬性
}

例:實現按照性別篩選的功能。

 :filters=[{text:‘男生’,value:‘男’},{ text:‘女生’,value:‘女’}]:filter-method=“filterMethod”
    filterMethod(value,row,column){
      return row.sex===value;
}
     例:按照年齡篩選。

(小於20歲,大於20歲小於25歲,大於25歲)

          :filters=[{text:‘小於20歲’,value:[0,20]},...]:filter-method=“filterByAge”
             filterByAge(value,row){
               return row.age>=value[0] && row.age<value[1];
}

2、設置篩選框的位置:
使用<el-table-column>的filter-placement屬性。
取值:left、left-start、left-end、
right、right-start、right-end、
top、top-start、top-end、
bottom、bottom-start、bottom-end
3、設置是否可以同時選中多個篩選項:
使用<el-table-column>的filter-multiple屬性。
默認值:true,表示允許選中多個篩選項。
4、<el-table>的clearFilter()方法:將數據恢復爲原始數據。
this.$refs.student.clearFilter();

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章