表格代码

    <div class="m-table">
<el-table :data="logs" style="width: 100%" stripe height="calc(100% - 60px)" @sort-change="sortChange" :header-cell-style="{
'background-color': '#fafafa',
'color': 'rgb(103, 194, 58)',
'border-bottom': '1px rgba(103, 194, 58, 0.43) solid'
}" :default-sort = "{prop: 'operatetime', order: 'descending'}">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand2">
<el-form-item label="账号(md5)">
<span>{{ props.row.account }}</span>
</el-form-item><br/>
<el-form-item label="目标链接">
<div>{{ props.row.url }}</div>
</el-form-item>
<el-form-item label="提交内容">
<div style="white-space: initial; width: calc(100% - 90px)">{{ props.row.post }}</div>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="用户昵称" prop="nickname" sortable :header-align="table_align" :align="table_align"></el-table-column>
<el-table-column label="操作类型" prop="type" sortable="custom" :header-align="table_align" :align="table_align"></el-table-column>
<!--<el-table-column label="目标链接" prop="url" sortable :header-align="table_align" :align="table_align"></el-table-column>-->
<el-table-column label="操作时间" prop="operatetime" sortable :header-align="table_align" :align="table_align"></el-table-column>
<el-table-column label="序号" type="index" width="50"></el-table-column>
</el-table>
</div>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="currentSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
</div>

相关js

  data () {
return {
currentPage: 1,
currentSize: 10,
total: 0,
table_align: 'left',
logs: [],
logType: '',
logTypes: [],
timeRange: [],
keyStr: '',
order: 'desc',
orderProp: 'operatetime',
times: [
{value: 1, unit: '小时'},
{value: 3, unit: '小时'},
{value: 6, unit: '小时'},
{value: 12, unit: '小时'},
{value: 1, unit: '天'},
{value: 3, unit: '天'},
{value: 7, unit: '天'},
{value: 1, unit: '月'},
{value: 3, unit: '月'},
],
pickerOptions: {
shortcuts: []
}
}
},
methods:{
getFilter(){
let filters = []
if(this.logType !== '')
filters.push({
prop: ['url'],
type: 'and',
operator: 'like',
value: this.logType
})
if(this.keyStr !== '')
filters.push({
prop: ['nickname', 'post'],
type: 'or',
operator: 'like',
value: this.keyStr
})
if(this.timeRange.length===2)
filters.push({
prop: 'operatetime',
operator: 'between',
value: this.timeRange
})
return JSON.stringify(filters)
},
getData(page){
if(page) this.currentPage = page
let obj = {
page: page || this.currentPage,
size: this.currentSize,
filters: this.getFilter(),
order: this.order,
orderProp: this.orderProp
}
this.$http.post(BASE_URL+'log/list', obj, {emulateJSON: true}).then((response) => {
this.logs = response.data.data
this.total = response.data.total
this.logs.forEach(log=>{
log.type = ''
for(let i in LOG.type){
if(log.url.indexOf(i)>=0)
log.type += LOG.type[i]
}
log.operatetime = TIME_FORMATE(log.operatetime)
if(log.nickname===null) log.nickname='--'
if(log.account===null) log.account='--'
})
}, (response) => {
// error callback
});
},
handleSizeChange(size){
this.currentSize = size
this.getData(1)
},
handleCurrentChange(page){
this.currentPage = page
this.getData()
},
sortChange(column){
if(column.prop === 'type') column.prop = 'url'
switch (column.order){
case 'ascending': this.order = 'asc'; break
case 'descending': this.order = 'desc'; break
default: this.order = ''
}
this.orderProp = column.prop
this.getData(1)
},
initTypeSelector(){
this.logTypes = []
for(let i in LOG.type){
this.logTypes.push({
label: LOG.type[i],
value: i
})
}
},
selectInit(){
this.logType = ''
this.timeRange = []
this.keyStr = ''
this.getData(1)
},
createTimes(){
this.pickerOptions.shortcuts = [{
text: '清除时间',
onClick(picker) {
picker.$emit('pick', []);
}
}]
this.times.forEach(t=>{
this.pickerOptions.shortcuts.push({
text: '最近'+TOCN(t.value)+t.unit,
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - t.value*TIMETYPE[t.unit]);
picker.$emit('pick', [start, end]);
}
})
})
}
},
created(){
this.createTimes()
this.initTypeSelector()
this.getData()
}

相关python

@app.route('/log/list', methods=['POST', 'OPTIONS'])
@loginCheck
def list_log(): if request.method == 'POST':
page = int(request.form['page'])
size = int(request.form['size'])
condition = parseFilters(request)
order = parseOrder(request) dbsession = DBSession()
sql_str = '''SELECT T2.* from(
SELECT T.*, rownum RN FROM(
SELECT * FROM v_log where %s %s
)T) T2 WHERE RN BETWEEN :rowBegin and :rowEnd
'''%(condition, order)
print sql_str
logs = dbsession.execute(sql_str, {
'rowBegin': (page-1)*size+1,
'rowEnd': page*size
})
total = dbsession.execute('select count(*) from v_log where %s' %condition).first()[0] dbsession.close()
return jsonify({'result': '', 'data': [{
'account': log.account,
'nickname': log.nickname,
'url': log.url,
'post': log.post,
'operatetime': log.operatetime
} for log in logs], 'total': total})
return jsonify({'result': ''}) 后台管理,就没考虑sql注入,写的比较烂
def parseFilters(request):#解析页面传过来的各种条件
filters = request.form['filters']
sqlStr = '1=1 '
filters = json.loads(filters) for f in filters: if f['operator'] == 'between':#特殊处理,接收时间
timeStr = "to_date('%s','yyyy-MM-dd HH24:mi:ss')"
sqlStr += "and %s between %s and %s" %(f['prop'], timeStr%f['value'][0], timeStr%f['value'][1]) elif f['operator'] == 'like':
temp = '1=1' if f['type'] == 'and' else '1=2'
for prop in f['prop']:
temp += " %s %s like '%%%s%%'"% (f['type'], prop, f['value'])
sqlStr += 'and (%s)'%temp elif f['operator'] in ['=', '>', '<']:
temp = '1=1' if f['type'] == 'and' else '1=2'
for prop in f['prop']:
temp += " %s %s %s '%s'" %(f['typo'], prop, f['operator'], f['value'])
sqlStr += 'and (%s)' % temp
return sqlStr def parseOrder(request):
order = request.form['order']
orderProp = request.form['orderProp']
if order=='':
return ''
else:
return 'order by %s %s'%(orderProp, order)

elementUI 表格分页后台排序记录的更多相关文章

  1. vue+ElementUI——表格分页(前端实现方法)

    1.使用ElementUI中的<el-table></el-table>和 <el-pagination></el-pagination>组件来实现 2 ...

  2. 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...

  3. 基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...

  4. Vue2.0+ElementUI+PageHelper实现的表格分页

    Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...

  5. vue+elementUI实现 分页表格的单选或者多选、及禁止部分选择

    一.vue+elementUI实现 分页表格前的多选 多选效果图: 代码如下: <el-table ref="multipleTable" :data="listD ...

  6. MySQL+Service+Servlet+Jsp实现Table表格分页展示数据

    下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...

  7. ngTbale假分页实现排序、搜索、导出CSV等功能

    一. ngTable功能简化 使用ngTable经常有分页,排序,过滤等功能,实现诸多功能较为麻烦.为了方便开发过程,可以抽取一些table共同点写一个公有方法. 注意: 1. 由于很多特别的需求,可 ...

  8. Ecside基于数据库的过滤、分页、排序

    首先ecside展现列表.排序.过滤(该三种操作以下简称为 RSF )的实现原理完全和原版EC一样, 如果您对原版EC的retrieveRowsCallback.sortRowsCallback.fi ...

  9. 基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

    在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往往需要对记录 ...

随机推荐

  1. webpack 支持的模块方法

    在webpack中支持的模块语法风格有:ES6,commonJS和AMD ES6风格(推荐) 在webpack2中,webpack支持ES6模块语法.这意味着在没有babel等工具处理的情况下你就可以 ...

  2. Appium+python自动化4-元素定位uiautomatorviewer

    前言 环境搭建好了,下一步元素定位,元素定位本篇主要介绍如何使用uiautomatorviewer,通过定位到页面上的元素,然后进行相应的点击等操作. uiautomatorviewer是androi ...

  3. eclipse中设置项目的编码方式

    1.windows->Preferences...打开"首选项"对话框,左侧导航树,导航到general->Workspace,右侧Text file encoding ...

  4. 【文章存档】如何通过 GitLab 进行持续部署

    好久没写博客了,这几天存档一下新文章. 链接 https://docs.azure.cn/zh-cn/articles/azure-operations-guide/app-service-web/a ...

  5. 初识kibana

    前言: 什么是Kibana?? Kibana是一个开源的分析与可视化平台,设计出来用于和Elasticsearch一起使用的.你可以用kibana搜索.查看.交互存放在Elasticsearch索引里 ...

  6. CodeMirror mode编写

    Writing CodeMirror Modes Modes typically consist of a single JavaScript file. This file defines, in ...

  7. jedispool资源释放

    我的天啊,这几天要被jedis逼疯了,网上好多资料并没有介绍jedis链接释放不了的方法,我确定他们那些老人肯定知道都,就是不说,你们说气人不.还有要吐槽哈jedis源码开发的那些家伙,怎么写的代码, ...

  8. 使用maven的插件进行maven项目的打包

    1 maven项目打包的插件有3种 maven-jar-plugin maven-assembly-plugin maven-shade-plugin 2 maven-jar-plugin 现在要新增 ...

  9. laravel 登录后跳转原来浏览的页面

    方法 1.修改一下文件/vendor/laravel/framework/src/Illuminate/Foundation/Auth/RedirectsUsers.php 修改内容如下: 没有的加入 ...

  10. DELPHI动态创建窗体

    //第一种方式 procedure TForm1.btn1Click(Sender: TObject); begin With TForm2.Create(Application) do Try Sh ...