vue-admin-template分页搜索排序
2019-12-17 本文已影响0人
xyz098
准备
-
build git-vue-admin-template
git clone https://github.com/PanJiaChen/vue-admin-template.git cd vue-admin-template # 安装依赖 npm install --verbose --registry=https://registry.npm.taobao.org # 开发环境运行 npm run dev # 编译到线上 npm run build:prod
-
advanced
# 调优 npm run preview # 调优查看 npm run preview -- --report # 代码格式 npm run lint # 检查代码格式 npm run lint -- --fix
-
部署 deployment
# 生产dist文件 npm run build:prod # 本地预览 npm install -g serve --verbose serve -s dist
实战
分页pagination
- 关键点: 表格绑定当前页数据
搜索search
- 关键点: 双向绑定事件响应关联表格数据
排序sort
- 关键点:指定prop与sortable
加载loading
- 关键点: 绑定后根据bool类型决定
代码附录
-
javascript
<script> export default { data() { return { isLoading: true, // 默认加载 pageList: [], // 当前页数据 total: 0, // 总数据条数 currentPage: 1, // 当前页 pagelimit: 2, // 页面展示数据条数 list: [], // 原始数据 search: [], // 搜索字段 tmpList: [] // 临时搜索结果数据 } }, created() { this.initList() }, methods: { // 模拟初始原始数据 initList() { this.list = [ { name: 'axxx', request: 1, availab: '10%', hit: '10%', restime: 60, bandwidth: 50, xx4: 50, xx5: 50, backnum: 5, backband: 50, back4xx: 10, back5xx: 20 }, { name: 'bAAx', request: 2, availab: '20%', hit: '10%', restime: 60, bandwidth: 50, xx4: 50, xx5: 50, backnum: 5, backband: 50, back4xx: 10, back5xx: 20 }, { name: 'aaxxx', request: 3, availab: '30%', hit: '10%', restime: 60, bandwidth: 50, xx4: 50, xx5: 50, backnum: 5, backband: 50, back4xx: 10, back5xx: 20 } ] this.initPageList() }, // 初始页面数据 initPageList() { this.isLoading = false // 有数据关闭加载表示 this.total = this.list.length this.pagelimit = 2 this.pageList = this.list.slice((this.currentPage - 1) * this.pagelimit, this.currentPage * this.pagelimit) // 当前页数据内容 }, // 改变页面条数 handleSizeChange: function(size) { this.pagelimit = size this.initPageList() }, // 改变当前页 handleCurrentChange: function(currentPage) { this.currentPage = currentPage this.initPageList() }, // 模糊搜索 handleFilter: function() { this.isLoading = true // 原始数据过滤出 包含搜索字段的 数据结果 this.tmpList = this.list.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase())) // 判断是否为全局搜索与空搜索 if (this.tmpList.length === this.list.length || this.tmpList.length === 0) { this.initPageList() } else { // 搜索结果以一页展示 this.isLoading = false this.pageList = this.tmpList this.currentPage = 1 this.pagelimit = this.tmpList.length this.total = this.tmpList.length } } } } </script>
-
template
<template> <div class="app-container"> <div style="width: 100%;margin-top:30px;margin-left:30px"> <!-- v-model实现双向绑定,handleFilter事件响应 原生回车事件 --> <el-input v-model="search" placeholder="域名" style="width: 400px;" @keyup.enter.native="handleFilter" /> <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter"> 查询 </el-button> </div> <!-- v-loading加载与排序sort --> <el-table v-loading="isLoading" :data="pageList" style="width:90%;margin-top:30px;margin-left:30px" border :default-sort="{prop: 'request', order: 'descending'}" > <el-table-column align="center" label="域名" prop="name" /> <el-table-column align="center" label="请求数" prop="request" sortable /> <el-table-column align="center" label="可用率" prop="availab" sortable /> <el-table-column align="center" label="命中率" prop="hit" sortable /> <el-table-column align="center" label="响应时间" prop="restime" sortable /> <el-table-column align="center" label="带宽" prop="bandwidth" sortable /> <el-table-column align="center" label="4xx" prop="xx4" sortable /> <el-table-column align="center" label="5xx" prop="xx4" sortable /> <el-table-column align="center" label="回源次数" prop="backnum" sortable /> <el-table-column align="center" label="回源带宽" prop="backband" sortable /> <el-table-column align="center" label="回源4xx" prop="back4xx" sortable /> <el-table-column align="center" label="回源5xx" prop="back5xx" sortable /> </el-table> <div style="width:90%;margin-top:30px;margin-left:30px"> <!-- 分页 --> <el-pagination background :current-page="currentPage" :page-sizes="[10,15,20]" :page-size="pagelimit" layout="total,prev,pager,next,jumper,sizes" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </div> </template>