快捷導(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代表頁面中顯示的篩選文字,value代表篩選用到的值,在方法中filterHandler用到
3、column 的 key，如果需要使用 filter-change 事件，則需要此屬性標(biāo)識(shí)是哪個(gè) column 的篩選條件(綁定的是要對(duì)接口中排序的字段)
4、數(shù)據(jù)過濾的選項(xiàng)是否多選（multiple代表是否查詢多條）
5、fliter-methods:數(shù)據(jù)過濾使用的方法，如果是多選的篩選項(xiàng)，對(duì)每一條數(shù)據(jù)會(huì)執(zhí)行多次，任意一次返回 true 就會(huì)顯示。參數(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ù)類型

頁面效果

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

您可能感興趣的文章:

相關(guān)文章

vue @click與@click.native,及vue事件機(jī)制的使用分析
這篇文章主要介紹了vue @click與@click.native,及vue事件機(jī)制的使用分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vee-validate vue 2.0自定義表單驗(yàn)證的實(shí)例
今天小編就為大家分享一篇vee-validate vue 2.0自定義表單驗(yàn)證的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Vue根據(jù)條件添加click事件的方式
今天小編就為大家分享一篇Vue根據(jù)條件添加click事件的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
詳解Vue webapp項(xiàng)目通過HBulider打包原生APP
這篇文章主要介紹了詳解Vue webapp項(xiàng)目通過HBulider打包原生APP，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06
Vue多重文字描邊組件實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了Vue多重文字描邊組件實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
vue實(shí)現(xiàn)element上傳多張圖片瀏覽刪除功能
這篇文章主要介紹了vue實(shí)現(xiàn)element上傳多張圖片瀏覽刪除功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-10-10
vue多層嵌套路由實(shí)例分析
這篇文章主要介紹了vue多層嵌套路由,結(jié)合實(shí)例形式分析了vue.js多層嵌套路由的概念、原理及相關(guān)操作技巧,需要的朋友可以參考下
2019-03-03
vue如何監(jiān)聽el-select選擇值的變化
這篇文章主要介紹了vue如何監(jiān)聽el-select選擇值的變化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
基于WebRTC實(shí)現(xiàn)音視頻通話功能
WebRTC作為一種開放標(biāo)準(zhǔn)的實(shí)時(shí)通信協(xié)議,能輕松實(shí)現(xiàn)瀏覽器之間的實(shí)時(shí)音視頻通信,本次主要分享基于WebRTC的音視頻通話技術(shù),講解WebRTC原理和音視頻傳輸?shù)汝P(guān)鍵概念,通過案例實(shí)踐,帶大家掌握如何搭建一個(gè)音視頻通話應(yīng)用,需要的朋友可以參考下
2024-05-05
Vue響應(yīng)式原理及雙向數(shù)據(jù)綁定示例分析
這篇文章主要為大家介紹了Vue響應(yīng)式原理及雙向數(shù)據(jù)綁定的示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07