table-more.vue

<template>
  <div :style="{ width: fileWidth }" class="table">
    <Table border :columns="columns1" :data="tableData" @on-selection-change="selectChange" ref="selection" height="400">
      <template slot-scope="{ row }" slot="addDate">
        {{ row.addDate | filterCreateTime }}
      </template>
    </Table>
    <Page :total="total" :current="pageNum" :page-size="pageSize" show-sizer size="small"  class="pageClass" 
    @on-change="changePage"    @on-page-size-change="pageSizeChange" />
  </div>
</template>
<script>
export default {
  props: {
    fileWidth: {
      type: String,
      default: "100%",
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: 0,
    },
  },
  computed: {},
  filters: {
    filterCreateTime(val) {
      return val.substr(0, 10)+' '+val.substr(11, 8)
    },
  },
  data() {
    return {
      selectArr:[],
      pageSize:10,
      pageNum:1,
      columns1: [
        {
          title: "序号",
          type: "index",
          width: 70,
          align: 'center'
        },
        {
          title: "选择",
          type: "selection",
          width: 55,
          align: 'center'
        },
        {
          title: "标题",
          key: "title",
          align: 'center',
        },
        {
          title: "反馈时间",
          key: "addDate",
          slot: 'addDate',
          align: 'center',
        },
        {
          title: "查看",
          key: "action",
          width: 80,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Icon",
                {
                  props: {
                    type: "md-eye",
                  },
                  on: {
                    click: () => {
                      this.seeDetail(params);
                    },
                  },
                }
              ),
            ]);
          },
        }
      ],
    };
  },
  methods: {
    changePage(page){
      this.pageNum = page;
      this.$emit('changePage',page);
    },
    pageSizeChange(size){
      this.pageSize = size;
      this.$emit('pageSize',size); 
    },
    seeDetail(params){
      this.$emit('seeDetail',params.row);
    },
    selectChange(arr){
      this.selectArr = arr;
    }
  },
};
</script>
<style lang="less" scoped>
  .table {
    .pageClass{
      margin:10px
    }
  }
</style>