如何使用 Vuejs 和 Laravel 应用数据表

Question

我正在填充表格，但现在我想应用分页、搜索、过滤条件。我是 Vue 新手，如何应用到我的代码中？

下面是我的 Vue 文件：

<template>

    <div>
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Logs</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Logs</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <div class="content">

            <div class="container-fluid">

                <div class="row">

                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title"></h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body table-responsive p-0" style="width: 1000px;">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>User Id</th>
                                        <th>Message Title</th>
                                        <th>Process Type</th>
                                        <th>Description</th>
                                        <th>Data Load</th>
                                        <th>Message Code</th>
                                        <th>Log Type</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="socket in sockets">
                                        <td>{{socket.id}}</td>
                                        <td>{{socket.user_id}}</td>
                                        <td>{{socket.message_title}}</td>
                                        <td>{{socket.process_type}}</td>
                                        <td>{{socket.description}}</td>
                                        <td>{{socket.data_load}}</td>
                                        <td>{{socket.msg_code}}</td>
                                        <td>{{socket.log_type}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>

                </div>

            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /.content -->

    </div>

</template>

这是我从数据库中获取所有数据的脚本。

    <script>
    
        export default {
    
            data() {
    
                return {
                    sockets: [],
                    form: new Form({
                        'user_id': '',
                        'message_title': '',
                        'process_type': '',
                        'description': '',
                        'data_load': '',
                        'msg_code': '',
                        'log_type': '',
                    })
                }
    
            },
    
    
            created() {
                axios.get('/message')
                    .then(({data}) => this.sockets = data);
            },
    
            methods: {
                onSubmit(){
                    //this.form.password_confirmation = this.form.password; // Temp for this form only.
                    this.form
                        .post('/message')
                        .then(socket => this.sockets.push(socket));
                }
            }
        }
    
    </script>

我还添加了屏幕截图：

Answer 1

我建议您针对您的案例采用以下方法：首先，您有一个数据变量 sockets，您可以在其中从您的 API 收集所有记录数据。对于分页，我将创建另一个变量来确定用户所在的页面 (pageIndex) 和另一个变量来描述每个页面上存在多少项目 (itemsOnPage)。然后使用这些变量，您可以创建一个computed 属性来仅过滤该页面的数据，然后在您的模板中为表格使用此计算属性，而不是直接使用sockets。示例：

<template>
    <tr v-for="socket in paginatedSockets">
      <td>{{ socket.id }}</td>
      <td>{{ socket.user_id }}</td>
      <td>{{ socket.message_title }}</td>
      <td>{{ socket.process_type }}</td>
      <td>{{ socket.description }}</td>
      <td>{{ socket.data_load }}</td>
      <td>{{ socket.msg_code }}</td>
      <td>{{ socket.log_type }}</td>
    </tr>
</template>

<script>
export default {
  computed: {
    paginatedSockets() {
      return this.sockets.filter((socket, index) => {
        // Filter the array fo get only the items you want from this.sockets, something like that (this is not complete):
        return index < this.itemsOnPage;
      });
    },
  },
  data() {
    return {
      sockets: [],
      pageIndex: 0,
      itemsOnPage: 10,
    };
  },
};
</script>

关于过滤，您可以使用逻辑扩展此计算属性。例如，您可以拥有一个绑定到数据变量searchCriteria 的<input v-model="searchCriteria"/>，然后在paginatedSockets 中使用它。示例：

export default {
  computed: {
    paginatedSockets() {
      return this.sockets.filter((socket, index) => {
        // Filter the array fo get only the items you want from this.sockets, something like that (this is not complete):
        return socket === this.searchCriteria && index < this.itemsOnPage;
      });
    },
  },
  data() {
    return {
      sockets: [],
      pageIndex: 0,
      itemsOnPage: 10,
      searchCriteria: ''
    };
  },
};
</script>

我希望这会有所帮助。