element ui表格實現下拉篩選功能_程式設計

本文例項為大家分享了element ui表格實現下拉篩選的具體程式碼，供大家參考，具體內容如下

1、default-sort中prop傳入要排序的欄位(介面返回或自己定義的資料)VdWWN、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 },www.cppcns.com  ]"
          :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>
      <www.cppcns.com/el-table>
</twww.cppcns.comemplate>

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

資料型別

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

頁面效果

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

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

相關推薦