elementUI 表格分页后台排序记录

2021-07-09 05:05

阅读:515

标签:代码   result   bottom   tin   name   sel   sele   isp   const   

表格代码

    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="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()
  }
View Code

 

相关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: 1, 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: 1})

后台管理,就没考虑sql注入,写的比较烂
View Code
技术分享图片技术分享图片
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)
View Code

 

elementUI 表格分页后台排序记录

标签:代码   result   bottom   tin   name   sel   sele   isp   const   

原文地址:https://www.cnblogs.com/lurenjia1994/p/9567422.html


评论


亲,登录后才可以留言!