Javascript Vuejs如何在分页数据表上的数据数组中搜索

在我的

vuejs

-应用程序中，我创建了一个DataTable组件，在其中我传递了一个数据数组，还可以在数据中进行搜索。到目前为止，它还可以工作，但现在我添加了一些分页，现在搜索过滤器不再工作，我不知道为什么

以下是我到目前为止得到的信息：

<input v-model="search" id="search" type="text">

<DataTable v-bind:data.sync="tableData" :columns="tableColumns" :filter="search" :rowsPerPage="2" :currentPage="1" />

以及DataTable组件：

<template>
  <div class="table">
    <div class="table-header">
        <div v-for="column in columns" @click="column.sortable == true ? sortBy(column.key) : stop($event)" class="header__item" :class="[sortKey == column.key ? 'active' : '', column.key ? column.key: '']" :key="column.id">
            <span>{{ column.label }}</span>
            <span class="sorting" v-if="filteredData.length > 1 && column.sortable == true" :class="sortOrders[column.key] > 0 ? 'icon-chevron_up' : 'icon-chevron_down'"></span>
        </div>
    </div>
    <div class="table-body">
        <router-link class="table-row" tag="div" v-for="entry in filteredData" :key="entry.id" :to="routePath + entry.id">
            <div class="table-data" v-for="column in columns" v-bind:key="column.id" :class="column.key">
                <div :class="[column.key ? column.key : '', entry.status ? entry.status: '']"><span>{{entry[column.key]}}</span></div>
            </div>
        </router-link>
    </div>
    <div class="table-footer">
        <nav>
            <ul class="pagination">
                <li class="page-item">
                    <button class="page-link prev" @click="page--" v-if="page != 1">
                        <i class="icon-chevron_left" />
                    </button>
                </li>
                <li class="page-item total">
                    <button class="page-link" :class="page == pageNumber ? 'active' : ''" v-for="pageNumber in totalPages" @click="setPage(pageNumber)" :key="pageNumber.id"> {{pageNumber}} </button>
                </li>
                <li class="page-item">
                    <button class="page-link next" v-if="page < totalPages" @click="page++">
                        <i class="icon-chevron_right" />
                    </button>
                </li>
            </ul>
        </nav>
    </div>
 </div>
</template>

<script>
export default {
  props: {
    data: {
        type: Array,
        default: () => []
    },
    columns: {
        type: Array,
        default: () => []
    },
    filter: {
        type: String,
        default: ""
    },
    rowsPerPage: {
        type: Number,
        default: 0
    },
    currentPage: {
        type: Number,
        default: 0
    }
},
data() {
    let sortOrders = {};
    this.columns.forEach(column => {
        sortOrders[column.key] = 1;
    });
    return {
        sortKey: "",
        sortOrders: sortOrders,
        page: this.currentPage,
        perPage: this.rowsPerPage,
        pages: [],
        searchKey: this.filter,
        resultCount: 0
    };
},
methods: {
    sortBy(key) {
        this.sortKey = key;
        this.sortOrders[key] = this.sortOrders[key] * -1;
    },
    stop(e) {
        e.stopPropagation();
    },
    paginate(data) {
        let page = this.page;
        let rowsPerPage = this.perPage;
        let from = page * rowsPerPage - rowsPerPage;
        let to = page * rowsPerPage;
        return data.slice(from, to);
    },
    setPage(pageNumber) {
        this.page = pageNumber;
    }
},
computed: {
    filteredData() {
        let sortKey = this.sortKey;
        let filter = this.filter && this.filter.toLowerCase();
        let order = this.sortOrders[sortKey] || 1;
        let data = this.data;

        this.resultCount = data.length;

        if (filter) {
            function chk(filter) {
                return function(value) {
                    return (
                        String(value)
                            .toLowerCase()
                            .indexOf(filter) > -1
                    );
                };
            }

            data = data.filter(row => {
                return (
                    Object.keys(row).some(key => {
                        return (
                            String(row[key])
                                .toLowerCase()
                                .indexOf(filter) > -1
                        );
                    }) 
                );
            });
        }

        if (sortKey) {
            data = data.slice().sort((a, b) => {
                a = a[sortKey];
                b = b[sortKey];
                return (a === b ? 0 : a > b ? 1 : -1) * order;
            });
        }

        return this.paginate(data);
    },
    totalPages() {
        return Math.ceil(this.resultCount / this.perPage);
    }
  },
  created() {
    this.routePath = this.path;
  },
};

{{column.label}}
{{entry[column.key]}




{{pageNumber}}




导出默认值{
道具：{
数据：{
类型：数组，
默认值：（）=>[]
},
栏目：{
类型：数组，
默认值：（）=>[]
},
过滤器：{
类型：字符串，
默认值：“
},
行页面：{
类型：数字，
默认值：0
},
当前页面：{
类型：数字，
默认值：0
}
},
数据（）{
让sortOrders={}；
this.columns.forEach（column=>{
排序器[column.key]=1；
});
返回{
sortKey:“，
巫师：巫师，
page:this.currentPage，
perPage:this.rowsPerPage，
页码：[]，
searchKey:this.filter，
结果帐户：0
};
},
方法：{
索特比（钥匙）{
this.sortKey=key；
this.sortOrders[key]=this.sortOrders[key]*-1；
},
停止（e）{
e、 停止传播（）；
},
分页（数据）{
设page=this.page；
让rowsPerPage=this.perPage；
let from=第页*行页面-行页面；
let to=页面*行页面；
返回data.slice（from，to）；
},
设置页（页码）{
this.page=页码；
}
},
计算：{
过滤数据（）{
让sortKey=this.sortKey；
让filter=this.filter&&this.filter.toLowerCase（）；
让order=this.sortOrders[sortKey]| | 1；
设data=this.data；
this.resultCount=data.length；
如果（过滤器）{
功能chk（过滤器）{
返回函数（值）{
返回(
字符串（值）
.toLowerCase（）
.indexOf（过滤器）>-1
);
};
}
data=data.filter（行=>{
返回(
Object.key（行）.some（key=>{
返回(
字符串（行[键]）
.toLowerCase（）
.indexOf（过滤器）>-1
);
}) 
);
});
}
如果（排序键）{
data=data.slice（）.sort（（a，b）=>{
a=a[排序键]；
b=b[sortKey]；
退货（a==b？0:a>b？1:-1）*订单；
});
}
返回此。分页（数据）；
},
总页数（）{
返回Math.ceil（this.resultCount/this.perPage）；
}
},
创建（）{
this.routePath=this.path；
},
};

---

有人能帮我吗？

兄弟，你能创建一个代码沙盒吗？