# PageTable 分页表格

<template>
  <ice-page-table
    background
    :data.sync="tableInfo.data"
    :refresh="tableInfo.refresh"
    :init-currentPage="tableInfo.initCurrentPage"
    :api="getListApi"
    :handle="tableInfo.handle"
    :field-list="tableInfo.fieldList"
  />
</template>
<script>
export default {
  data() {
    return {
      tableInfo: {
        refresh: 1,
        initCurrentPage: 1,
        data: [],
        fieldList: [
          // 动态表头
          { label: '日期', prop: 'date', width: 180 },
          { label: '姓名', prop: 'name', width: 200 },
          { label: '地址', prop: 'address' },
        ],
        handle: {
          fixed: 'right',
          label: '操作',
          width: '200',
          btList: [
            {
              label: '删除',
              type: 'danger',
              icon: 'el-icon-delete',
              event: 'delete',
              show: true,
              ifRender(row) {
                return row.flag === true
              },
            },
          ],
        },
      },
    }
  },

  mounted() {
    this.getList()
  },

  methods: {
    // 查询数据的API
    getListApi(params) {
      return this.$http({
        url: '/api/article/getList',
        method: 'get',
        params,
      })
    },

    // 刷新表格
    getList() {
      /*而组件内部watch字段change，
      重新调获取数据的接口，即可实现刷新功能*/

      this.tableInfo.refresh = Math.random()
    },
  },
}
</script>