javascript - 分页 Vue.js 表格并使搜索栏跨表格页面工作

Question

我有一个网络应用程序，后端使用 Django，前端使用 Vue.js。

在一个 HTML 页面中，我有一个 Vue.js 表。由于表格中有 700 多行，因此该页面加载速度非常慢，并且无法显示按钮部分按钮。所以我想对该表进行分页以在初始加载后显示底部按钮。我曾尝试使用 jquery 进行数据表进行分页，但它不符合用户的要求。似乎 jquery 数据表与 Vue.js 表背道而驰，它必须加载两次，所以我放弃了数据表。我怎样才能进行分页并使搜索栏跨表格页面工作？

HTML：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js" xmlns:v-on="http://www.w3.org/1999/xhtml"
            xmlns:v-on="http://www.w3.org/1999/xhtml"></script>

            <table id="myTable">
                <thead>
                <tr>
                    <th>Title</th>
                  

                    <th>Tag course & Submit</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(row, index) in filteredRows" :key="`title-${index}`">
                    <td  v-html="highlightMatches(row.title)">{{ row.title }}</td>
                   
                    <td><button type="button" class="button2" v-on:click="check( $event, row.title)">Tag & Submit</button></td>
                </tr>
                </tbody>
            </table>

<script>
        Vue.prototype.$http = axios;
        var book_rows = [{title: XXX];

        const app = new Vue({
            el: '#app',
            data:() => ({
                filter: '',
                rows: book_rows
            }),

            methods: {
                highlightMatches(text)
                {
                    if (typeof text === 'string' || text instanceof String){
                        text = (text?text:'None');
                        const matchExists = text.toLowerCase().includes(this.filter.toLowerCase());
                        if (!matchExists) return text;
                        const re = new RegExp(this.filter, 'ig');
                        return text.replace(re, matchedText => `<strong>${matchedText}</strong>`);
                    }

                },
                submit : function(){
                    this.$refs.form.submit()
                },

            },
            computed: {
                filteredRows() {
                    return this.rows.filter(row => {
                        const author = String(row.author).toString().toLowerCase();
                        const title = String(row.title).toLowerCase();
                        const searchTerm = this.filter.toLowerCase();
                        return title.includes(searchTerm) ||
                            author.includes(searchTerm);
                    });
                }
            },
        });
 </script>

标签： javascriptvue.js