element ui表格如何實現(xiàn)下拉篩選功能

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

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

<template>
<el-table
        :data="tableData"
        
        empty-text="暫無數(shù)據(jù)"
        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">氣象監(jiān)測設備</span>
            <span v-if="scope.row.deviceType == 0">墑情監(jiān)測設備</span>
            <span></span>
          </template>
        </el-table-column>
      </el-table>
</template>

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

數(shù)據(jù)類型

頁面效果

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