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

Posted on by

本文實例為大傢分享瞭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"
        style="width: 100%"
        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;
    }
     }

數據類型

頁面效果

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：