<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>报表</title>
<style>
#audit {
margin-top: 20px;
}
thead > tr {
border: 1px solid #cc0000;
}
.filter {
margin-left: 20px;
}
.status-picker {
display: inline-block;
}
.status-picker select {
border-radius: 5px;
width: 180px;
float: left;
height: 37px;
margin-bottom: -13px;
border: 1px solid skyblue;
padding: 0 10px;
margin-right: 20px;
}
.container {
margin-top: 30px;
}
.jtp {
margin-top: 10px;
display: inline-block;
}
.jtp .ui.icon.input input {
padding: 0.5em !important;
width: 32px;
}
.modal .content {
display: flex !important;
justify-content: center;
align-items: center;
}
.button {
text-align: center;
}
.container {
margin-left: 20px;
}
.first {
background: #F9FAFB;
}
</style>
<link rel="stylesheet" href="./css/sear.css"/>
<script src="./js/jquery-3.1.js"></script>
<script src="./js/sear.js"></script>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="audit">
<div class="filter">
<div class="status-picker">
<select name="aKey" type="hidden" v-model.lazy="aKey">
<option value="">所有报表</option>
<option value="0">固定报表</option>
<option value="1">银行指数</option>
<option value="2">NBA</option>
<option value="3">CBA</option>
</select>
</div>
<div class="ui input icon">
<input type="text" v-model="fKey" placeholder="请输入您要查询的内容"/>
</div>
</div>
<div class="container">
<table class="ui compact celled table">
<thead>
<tr>
<th width="20%" class="first">id</th>
<th width="30%">报表类型</th>
<th width="50%">报表名称</th>
</tr>
</thead>
<tbody>
<tr v-for="user in filteredUsers">
<td>{{ user.id }}</td>
<td>
<button class="ui button primary" v-if="user.audit==0">固定报表</button>
<button class="ui button green" v-if="user.audit==1">银行指数</button>
<button class="ui button red" v-if="user.audit==2">NBA</button>
<button class="ui button grey" v-if="user.audit==3">CBA</button>
</td>
<td>
<a :href="user.url">{{ user.name }}</a>
</td>
</tr>
</tbody>
<tfoot class="full-width">
<tr>
<th colspan="4">
<button @click="turnPage(-1)">
上一页
</button>
<span>当前第 {{ currentPage+1 }} 页,共 {{ totalPage }} 页</span>
<button @click="turnPage(1)">
下一页
</button>
<div class="jtp">
<span>跳转到第 </span>
<div class="ui input icon">
<input type="text" v-model="jPage" @keyup.enter="jumpToPage">
</div>
<span> 页</span>
</div>
</th>
</tr>
</tfoot>
</table>
<div class="ui basic test modal">
<div class="ui items">
<div class="item">
<div class="content" style="background-color: #fff">
<a class="header">{{ selectedUser.name }}</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var mockUsers = [
{
name: '贷款余额产品期限结构表',
url: 'https://yongshi.net',
id: 1,
audit: 0
},
{
name: '贷款发生额产品期限结构表',
url: 'https://yongshi.net',
id: 2,
audit: 0
},
{
name: '贷款余额利率是否固定产品期限结构表',
url: 'https://yongshi.net',
id: 3,
audit: 0
},
{
name: '贷款发生额利率是否固定期限结构表',
url: 'https://yongshi.net',
id: 4,
audit: 0
},
{
name: '款余额企业规模期限结构表',
url: 'https://yongshi.net',
id: 5,
audit: 0
},
{
name: '贷款发生额企业规模期限结构表',
url: 'https://yongshi.net',
id: 6,
audit: 0
},
{
name: '存款余额产品期限结构表',
url: 'https://yongshi.net',
id: 7,
audit: 0
},
{
name: '存款发生额产品期限结构表',
url: 'https://yongshi.net',
id: 8,
audit: 0
},
{
name: '存款余额分额度期限结构表',
url: 'https://yongshi.net',
id: 9,
audit: 0
},
{
name: '存款发生额分额度期限结构表',
id: 10,
url: 'https://yongshi.net',
audit: 0
},
{
name: '存款余额',
url: 'https://yongshi.net',
id: 11,
audit: 0
},
{
name: '存款发生额产品额度结构表',
url: 'https://yongshi.net',
id: 12,
audit: 0
},
{
name: '贷款余额担保方式期限结构表',
url: 'http://denglu.net',
id: 13,
audit: 0
},
{
name: '贷款发生额担保方式期限结构表',
url: 'http://denglu.net',
id: 14,
audit: 0
},
{
name: '存、贷款加权平均利率及利差时序表',
url: 'http://denglu.net',
id: 15,
audit: 0
},
{
name: '贷款余额分产品统计表',
url: 'http://denglu.net',
id: 16,
audit: 0
},
{
name: '贷款发生额分产品统计表',
url: 'http://denglu.net',
id: 17,
audit: 0
},
{
name: '贷款余额分期限统计表',
url: 'http://denglu.net',
id: 18,
audit: 0
},
{
name: '贷款发生额分期限统计表 ',
url: 'http://denglu.net',
id: 19,
audit: 0
},
{
name: '贷款余额分企业规模统计表',
url: 'http://denglu.net',
id: 20,
audit: 0
},
{
name: '贷款发生额分企业规模统计表 ',
url: 'http://denglu.net',
id: 21,
audit: 0
},
//景气固定报表
{
name: '城镇',
url: 'https://yongshi.net',
id: 1,
audit: 1
},
{
name: '城镇储户',
url: 'https://yongshi.net',
id: 2,
audit: 1
},
{
name: '城镇银行',
url: 'https://yongshi.net',
id: 3,
audit: 1
},
{
vue实现表格的查询，下拉框，以及分页功能
需积分: 48 175 浏览量
2018-10-25
23:55:48
上传
评论 6
收藏 869KB ZIP 举报
table.zip （55个子文件） 
table .git info 
exclude 240B index 456B objects ff 955ca85dae689997e10f901c32ba06469bf60e 34KB 73 5da02803c72da8691b52604bf740c752d11a44 64KB 9a b9ae3089bba2058a78f4438edcc88c384b82d1 4KB a7 481f7b44251c58724c0e8ae3b3b4416f76b841 84KB 6b e082c389feb4e19bf0739a0e7842a66d349311 115KB HEAD 23B config 130B hooks pre-applypatch.sample 424B pre-push.sample 1KB commit-msg.sample 896B pre-commit.sample 2KB applypatch-msg.sample 478B prepare-commit-msg.sample 1KB update.sample 4KB post-update.sample 189B pre-rebase.sample 5KB pre-receive.sample 544B description 73B tables 
audit_user.html 14KB js jquery-3.1.js 85KB sear.js 270KB vue.js 197KB .git logs HEAD 158B refs heads master 158B remotes origin master 143B info exclude 240B index 512B COMMIT_EDITMSG 6B objects ff 955ca85dae689997e10f901c32ba06469bf60e 34KB 4b 2fc0ba8f028aaf4c0367115bbab2a1b039bbcf 115B 02 a34f1fa8ac249b93062652a2d19fcf640ad45e 53B 73 5da02803c72da8691b52604bf740c752d11a44 64KB 9a b9ae3089bba2058a78f4438edcc88c384b82d1 4KB a7 481f7b44251c58724c0e8ae3b3b4416f76b841 84KB 09 751783420df029feff4f496f7aca328cb9abd9 117B 6b e082c389feb4e19bf0739a0e7842a66d349311 115KB 20 c59a5daab41b641a39901450b34570a6b5a9a1 134B HEAD 23B config 324B refs heads master 41B remotes origin master 41B hooks pre-applypatch.sample 424B pre-push.sample 1KB commit-msg.sample 896B pre-commit.sample 2KB applypatch-msg.sample 478B prepare-commit-msg.sample 1KB update.sample 4KB post-update.sample 189B pre-rebase.sample 5KB pre-receive.sample 544B description 73B css sear.css 532KB资源评论
