快捷導(dǎo)航

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

更新時間：2021年11月16日 08:42:45 作者：Wxinin

這篇文章主要為大家詳細介紹了element ui表格實現(xiàn)下拉篩選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了element ui表格實現(xiàn)下拉篩選的具體代碼，供大家參考，具體內(nèi)容如下

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

<template>
<el-table
        :data="tableData"
        style="width: 100%"
        empty-text="暫無數(shù)據(jù)"
        ref="filterTable"
      >
        <el-table-column
          prop="deviceType"
          label="設(shè)備類型"
          show-overflow-tooltip
          column-key="deviceType"
          :filters="[
            { text: '氣象設(shè)備', value: 1 },
            { text: '墑情設(shè)備', value: 0 },
          ]"
          :filter-method="filterHandler"
          :filter-multiple="true"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.deviceType == 1">氣象監(jiān)測設(shè)備</span>
            <span v-if="scope.row.deviceType == 0">墑情監(jiān)測設(shè)備</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ù)類型