快捷導(dǎo)航

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

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

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

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

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

<template>
<el-table
        :data="tableData"
        style="width: 100%"
        empty-text="暫無(wú)數(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)測(cè)設(shè)備</span>
            <span v-if="scope.row.deviceType == 0">墑情監(jiān)測(cè)設(shè)備</span>
            <span></span>
          </template>
        </el-table-column>
      </el-table>
</template>

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

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

頁(yè)面效果

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目中使用多選框的實(shí)例代碼
這篇文章主要介紹了vue項(xiàng)目中使用多選框的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-07-07
vue實(shí)現(xiàn)觸底查詢功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)觸底查詢功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
vue中常用方法的用法匯總
Vue.js?是一個(gè)用于構(gòu)建用戶界面的漸進(jìn)式框架,本文主要為大家整理了一些常用的?Vue?方法及其詳細(xì)說(shuō)明和代碼示例,有需要的小伙伴可以參考一下
2023-11-11
vue-router實(shí)現(xiàn)webApp切換頁(yè)面動(dòng)畫效果代碼
本篇文章主要介紹了vue實(shí)現(xiàn)app頁(yè)面切換效果實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
vue實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
Vue2與Vue3兄弟組件通訊bus的區(qū)別及用法
這篇文章主要介紹了Vue2與Vue3兄弟組件通訊bus的區(qū)別及用法，有需要的朋友可以借鑒參考下，希望可以有所幫助，祝大家多多進(jìn)步早日升職加薪
2021-09-09
VUE-ElementUI?時(shí)間區(qū)間選擇器的使用
這篇文章主要介紹了VUE-ElementUI?時(shí)間區(qū)間選擇器的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vuex模塊化用法?跨模塊調(diào)用的方式
這篇文章主要介紹了Vuex模塊化用法?跨模塊調(diào)用的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,
2023-10-10
詳解Unity webgl 嵌入Vue實(shí)現(xiàn)過(guò)程
Unity webgl嵌入到前端網(wǎng)頁(yè)中,前端通過(guò)調(diào)用Unity webgl內(nèi)方法實(shí)現(xiàn)需要展示的功能,前端點(diǎn)擊Unity webgl內(nèi)的交互點(diǎn),Unity webgl返回給前端一些需要的數(shù)據(jù),這篇文章主要介紹了Unity webgl 嵌入Vue實(shí)現(xiàn)過(guò)程,需要的朋友可以參考下
2024-01-01
Vue?Router?實(shí)現(xiàn)登錄后跳轉(zhuǎn)到之前想要訪問(wèn)的頁(yè)面
這篇文章主要介紹了Vue?Router?實(shí)現(xiàn)登錄后跳轉(zhuǎn)到之前相要訪問(wèn)的頁(yè)面,本文僅演示路由跳轉(zhuǎn)和導(dǎo)航守衛(wèi)相關(guān)代碼的實(shí)現(xiàn)，不包含具體的權(quán)限驗(yàn)證和登錄請(qǐng)求，需要的朋友可以參考下
2022-12-12