iview-admin:Table分页功能

最近在使用iview-admin开发prometheus和alertmanager管理平台。我想把告警规则和告警展示成5条一页的列表，这就用到了iview的分页功能了。此文章使用告警规则页面实现做讲解。

1.前台实现

<template>
  <div>
    <Card>
      <tables ref="tables" v-model="tableData" :columns="columns"/>
      <div style="display: flex; justifyContent: flex-end; paddingTop: 15px">
        <Page :total="pageTotal" show-total :page-size="filter.pageSize" size="small" @on-change="changePage"/>
      </div>
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import {
  getPromRule
} from '@/api/data'

export default {
  name: 'rules',
  components: {
    Tables
  },
  data () {
    return {
      tableData: [],
      columns: [
        { title: '编号', align: 'center', key: 'id', sortable: true },
        { title: '告警名称', align: 'center', key: 'alert_name' },
        {
          title: '告警等级',
          align: 'center',
          key: 'severity',
          render: (h, params) => {
            if (params.row.severity === 'warning') {
              return h('div', '警告')
            } else if (params.row.severity === 'critical') {
              return h('div', '危急')
            } else if (params.row.severity === 'emergency') {
              return h('div', '紧急')
            }
          }
        },
        { title: '表达式', key: 'expr' },
        { title: '持续时长', align: 'center', key: 'duration' },
        { title: '标题', align: 'center', key: 'summary' },
        { title: '描述', align: 'center', key: 'description' },
        { title: '数据源', align: 'center', key: 'datasource' },
        { title: '告警策略', align: 'center', key: 'group' }
      ],
      db_type: 'mysql',
      ruleClassify: [],
      selectedRuleClassify: 0,
      prometheusRuleModel: {
        alertName: '', // 告警名称
        monitorMetrics: '', // 监控指标
        alarmThreshold: '', // 告警阈值
        symbols: '==', // 表达符号：<,>,==
        duration: '',
        summary: '',
        description: '',
        datasource: '',
        group: '',
        severity: ''
      },
      datasourceList: [],
      groups: [],
      pageTotal: 0,
      filter: {
        pageSize: 5,
        page: 1
      }
    }
  },
  methods: {
    initRulesData () {
      this.filterPromRule()
    },
    filterPromRule () {
      this.filter.ruleClassifyId = this.selectedRuleClassify
      getPromRule(this.filter).then(resp => {
        if (resp.data.code === 0) {
          this.tableData = resp.data.data.prom_rules
          this.pageTotal = resp.data.data.total
        } else {
          this.$Message.error('获取prometheus规则失败！')
        }
      })
    },
    changePage (index) {
      this.filter.page = index
      this.filterPromRule()
    }
  },
  mounted () {
    this.initRulesData()
  }
}
</script>

<style>

</style>

2.后台实现

    def get(self) -> dict:
        rule_classify_id = request.values.get("ruleClassifyId")
        page = int(request.values.get("page"))
        pagesize = int(request.values.get("pageSize"))
        prom_rules = 查询数据库
        total = len(prom_rules)
        prom_rules = prom_rules[(page - 1) * pagesize: page * pagesize]
        return pretty_result(code=HttpCode.OK, data={"prom_rules": prom_rules, "total": total})

3.效果