iview-admin：Table组件的使用

近在使用iview-admin开发prometheus和alertmanager管理平台，用到最多就是Table和Form两个组件了，本文重点介绍Table组件的使用。官方文档在 表格 - View Design (iviewui.com),如果有小伙伴有情趣可以去细看文档。

具体实例如下：

<template>
  <div>
    <Card>
      <tables ref="tables" v-model="tableData" :columns="columns"/>
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'

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: '表达式', align: 'center', 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' },
        {
          title: '操作',
          align: 'center',
          type: 'operator',
          render: (h, params) => {
            return h('div', [
              h('a', {
                style: {
                  'margin-right': '10px',
                  'color': '#1890ff',
                  'font-size': '14px'
                },
                on: {
                  click: () => {
                    this.edit(params)
                  }
                }
              }, '编辑'),
              h('Poptip', {
                props: {
                  confirm: true,
                  title: '你确定要删除吗?'
                },
                on: {
                  'on-ok': () => {
                    this.delete(params)
                  }
                }
              }, [
                h('a', {
                  style: {
                    'margin-right': '10px',
                    'color': '#1890ff',
                    'font-size': '14px'
                  }
                }, '删除')
              ])
            ])
          }
        }
      ]
    }
  },
  methods: {
    initRulesData () {
      this.filterPromRule()
    },
    filterPromRule () {
      getPromRule().then(resp => {
        if (resp.data.code === 0) {
          this.tableData = resp.data.data
        } else {
          this.$Message.error('获取prometheus规则失败！')
        }
      })
    },
    edit (params) {
      this.prometheusRuleModel.id = params.row.id
      this.prometheusRuleModel.duration = params.row.duration
      this.prometheusRuleModel.datasource = params.row.datasource_id
      this.prometheusRuleModel.summary = params.row.summary
      this.prometheusRuleModel.description = params.row.description
      this.prometheusRuleModel.alertName = params.row.alert_name
      this.prometheusRuleModel.group = params.row.group_id
      this.prometheusRuleModel.severity = params.row.severity
      this.prometheusRuleModel.monitorMetrics = params.row.expr.split(/[><=]/)[0]
      this.prometheusRuleModel.alarmThreshold = params.row.expr.split(/[><=]/)[1]
      this.prometheusRuleModel.symbols = params.row.expr[params.row.expr.search(/[><=]/)]
      this.modalTitle = '修改prometheus告警规则'
      this.modalType = 'edit'
      this.createModal = true
    },
    delete (params) {
      deletePromRule(params.row.id).then(resp => {
        if (resp.data.code === 0) {
          this.initRulesData()
        } else {
          this.$Message.error('删除prometheus规则失败！')
        }
      })
    }
  },
  mounted () {
    this.initRulesData()
  }
}
</script>

<style>

</style>