vue.js - 如何使用 Vuejs 和 Laravel 应用数据表
问题描述
我正在填充表格,但现在我想应用分页、搜索、过滤条件。我是 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>
我还添加了屏幕截图:
解决方案
对于您的情况,我建议您采用以下方法:首先,您有一个数据变量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>
关于过滤,您可以使用此逻辑扩展此计算属性。例如,您可以将<input v-model="searchCriteria"/>
其绑定到数据变量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>
我希望这有帮助。
推荐阅读
- string - 如何修复“str”对象在 PHP 中不可调用错误
- ag-grid - 如何刷新 ag-grid 数据表?api.refreshCells 遇到问题
- vhdl - 如何使用 VHDL-93 语法实例化 vivado ip 集成器内核?
- excel - 基于 ActiveCell 的选择
- java - 显示图像计数器
- javascript - 如何使用表外的搜索过滤器?
- nginx - 如何在 proxy_pass 中正确使用 nginx try_files?
- matlab - 在检测到的对象周围绘制矩形?
- docker - 无法在 Mesosphere DC/OS 上旋转 dockerized cassandra 集群
- c++ - Specification of lambda's return value doesn't work