element ui表格如何實現下拉篩選功能

這篇文章主要講解了“element ui表格如何實現下拉篩選功能”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“element ui表格如何實現下拉篩選功能”吧！

1、default-sort中prop傳入要排序的字段(接口返回或自己定義的數據)、order代表排序，這里用到降序
2、filters對象中text代表頁面中顯示的篩選文字,value代表篩選用到的值,在方法中filterHandler用到
3、column 的 key，如果需要使用 filter-change 事件，則需要此屬性標識是哪個 column 的篩選條件(綁定的是要對接口中排序的字段)
4、數據過濾的選項是否多選（multiple代表是否查詢多條）
5、fliter-methods:數據過濾使用的方法，如果是多選的篩選項，對每一條數據會執行多次，任意一次返回 true 就會顯示。參數為value, row, column

<template>
<el-table
        :data="tableData"
        
        empty-text="暫無數據"
        ref="filterTable"
      >
        <el-table-column
          prop="deviceType"
          label="設備類型"
          show-overflow-tooltip
          column-key="deviceType"
          :filters="[
            { text: '氣象設備', value: 1 },
            { text: '墑情設備', value: 0 },
          ]"
          :filter-method="filterHandler"
          :filter-multiple="true"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.deviceType == 1">氣象監測設備</span>
            <span v-if="scope.row.deviceType == 0">墑情監測設備</span>
            <span></span>
          </template>
        </el-table-column>
      </el-table>
</template>

methods: {
// 表頭過濾事件
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    }
     }

數據類型

頁面效果

感謝各位的閱讀，以上就是“element ui表格如何實現下拉篩選功能”的內容了，經過本文的學習后，相信大家對element ui表格如何實現下拉篩選功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！