快捷導(dǎo)航

vue實(shí)現(xiàn)iview表格添加篩選功能的示例代碼

更新時(shí)間：2023年07月24日 11:32:51 作者：前端開心果

本文主要介紹了vue實(shí)現(xiàn)iview表格添加篩選功能的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

基礎(chǔ)示例

<template>
    <Table border :columns="columns" :data="data"></Table>
</template>
<script>
    export default {
        data () {
            return {
                columns: [
                    {
                        title: '名稱',
                        key: 'name'
                    },
                    {
                        title: '年齡',
                        key: 'age',
                        filters: [
                            {
                                label: '大于25',
                                value: 1
                            },
                            {
                                label: '小于25',
                                value: 2
                            }
                        ],
                        filterMultiple: false,
                        filterMethod (value, row) {
                            if (value === 1) {
                                return row.age > 25;
                            } else if (value === 2) {
                                return row.age < 25;
                            }
                        }
                    },
                    {
                        title: '地址',
                        key: 'address',
                        filters: [
                            {
                                label: '北京',
                                value: '北京'
                            },
                            {
                                label: '上海',
                                value: '上海'
                            },
                            {
                                label: '四川',
                                value: '四川'
                            }
                        ],
                        filterMethod (value, row) {
                            return row.address.indexOf(value) > -1;
                        }
                    }
                ],
                data: [
                    {
                        name: '張三',
                        age: 10,
                        address: '四川',
                    },
                    {
                        name: '李四',
                        age: 25,
                        address: '上海',
                    },
                    {
                        name: '王五',
                        age: 35,
                        address: '北京',
                    },
                    {
                        name: '秀豆',
                        age: 27,
                        address: '四川',
                    }
                ],
            }
        }
    }
</script>

特殊情況改造

filters中的數(shù)據(jù)需要?jiǎng)討B(tài)獲取

當(dāng)filters中的內(nèi)容需要從后端接口中獲取，如果我們直接把從接口中獲取到的數(shù)據(jù)賦值給filters的話，篩選不會(huì)生效。錯(cuò)誤示例

{
    title: '年齡',
    key: 'age',
    filters: this.filters, // 從接口返回的數(shù)據(jù)
    filterMultiple: false,
    filterMethod (value, row) {
        // ...
    }
},

正確示例

// 偽代碼
const res = await this.$axois(...); // 獲取對(duì)應(yīng)接口數(shù)據(jù)
this.filters = res;
this.columns[1].filters = this.filters; // 當(dāng)前把需要的數(shù)據(jù)賦值給columns

filters中的數(shù)據(jù)過(guò)多，導(dǎo)致超出了屏幕內(nèi)容以外的區(qū)域

請(qǐng)?zhí)砑訄D片描述

這種情況怎么辦？可以會(huì)想沒(méi)法用了，得自己重新寫個(gè)了，但轉(zhuǎn)念一想，這是css樣式問(wèn)題，我們可以檢查對(duì)應(yīng)元素，通過(guò)javascript拿到指定元素，然后去修改元素的相關(guān)樣式啊。解決方法

// 接上面的示例，當(dāng)filters中的數(shù)據(jù)從接口中獲取到后，我們`f12`拿到指定元素，修改它的高度等屬性即可。
this.$nextTick(() => {
  if (this.filters.length) {
    let listDom = document.querySelector(".main-ui-table-filter-list-item");
    listDom.style.height = "400px";
    listDom.style.overflow = "auto";
  }
})

修改后的樣式就沒(méi)撒問(wèn)題了