vue實現iview表格添加篩選功能的示例代碼

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

本文主要介紹了vue實現iview表格添加篩選功能的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

基礎示例

<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中的數據需要動態(tài)獲取

當filters中的內容需要從后端接口中獲取，如果我們直接把從接口中獲取到的數據賦值給filters的話，篩選不會生效。錯誤示例

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

正確示例

// 偽代碼
const res = await this.$axois(...); // 獲取對應接口數據
this.filters = res;
this.columns[1].filters = this.filters; // 當前把需要的數據賦值給columns

filters中的數據過多，導致超出了屏幕內容以外的區(qū)域

請?zhí)砑訄D片描述

這種情況怎么辦？可以會想沒法用了，得自己重新寫個了，但轉念一想，這是css樣式問題，我們可以檢查對應元素，通過javascript拿到指定元素，然后去修改元素的相關樣式啊。解決方法

// 接上面的示例，當filters中的數據從接口中獲取到后，我們`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";
  }
})

修改后的樣式就沒撒問題了