组件原理说明：UI视图层(即页面的查询条件)对应view对象，查询条件对应query对象，点击‘查询’按钮，执行如下代码示例

this.query = Object.assign({}, this.query, {
  name: this.view.name
})

组件内部通过监听query属性对象的变化，从而触发查询接口。组件内部提供了overflow scopedSlot,采用tooltip进行溢出悬浮展示，具体见下方代码示例。

Props

| 参数 | 说明 | 类型 | 默认值 | | --------------- | ------------------------------------------------------------ | ------------ | ------------------------------------------- | | queryApi | 列表查询接口 | | | | query | 查询条件对应的参数 | object | 默认为空对象 | | queryOnMounted | 是否在mounted时主动触发查询 | boolean | true | | showLoading | 查询时是否展示table的loading | boolean | true | | transformData | 对列表数据进行转换，可以添加属性或对数据进行处理等 | function | | | listKey | 列表数据的属性path | string | 'list' | | currentKey | 当前页的属性path | string | 'current' | | hasCurrent | 后端接口是否返回了是第几页的信息 | boolean | false | | totalKey | 总页数的属性path | string | 'total' | | pagerParams | 分页查询对应的页码值,这个用来设置页码参数对应的入参，current表示当前页的入参，pageSize表示每页条数的入参 | object | { current: 'pageNum',pageSize: 'pageSize' } | | defaultPageSize | 默认的每页条数 | number | 10 | | refreshTime | 查询接口轮询时间间隔，单位毫秒，如果设置改属性，列表数据将定时刷新 | number|null | null | | rowDragEnd | 行拖拽后触发的函数，返回 promise，可以做二次确认是否移动到目标位置 | function | |

columns

| 属性名称 | 说明 | 类型 | | ----------------------------------------------- | ------------------------------------------------------------ | ------- | | resizable | 设置该列是否可拖拽改变列框，true表示可拖拽，false或不设置表示不可拖拽 | boolean | | tooltip | 设置tooltip相关属性，只有在scopedSlots: { customRender: 'overflow' }时生效 | object | | scopedSlots: { customRender: 'overflow' } | 可以让单元格内容根据宽度自动省略,悬停并出现tooltip,如果没有溢出则不显示tooltip | | | scopedSlots: { customRender: 'dragSort' } | 显示行拖拽排序 | | | scopedSlots: { customRender: 'index' } | 显示序号 | | | scopedSlots: { customRender: 'incrementIndex' } | 显示自增序号 | |

events

| 事件名称 | 说明 | 回调参数 | | ------------ | ---------------------- | -------------------------------- | | query | 查询前触发的回调函数 | Function() | | querySuccess | 查询成功触发的回调函数 | Function(dataSource, pagination) |

方法

| 方法名称 | 说明 | 入参 | | ----------- | ------------------ | ------------------------------------------------------------ | | refreshPage | 重新查询第一页数据 | | | refreshData | 刷新当前页数据 | | | toPage | 跳转到特定页 | toPage(page, pageSize),page：要跳转的页码,pageSize 每页的条数 |

代码示例：

<template>
  <div class="home">
    <a-space class="query-panel">
      <a-input v-model="view.name" placeholder="请输入姓名"></a-input>
      <a-button type="primary" @click="search">查询</a-button>
    </a-space>
    <div>
      <PagerTable
        ref="pagerTableRef"
        showQuickJumper
        showSizeChanger
        row-key="id"
        :queryApi="queryList"
        :query="query"
        :columns="columns"
        :show-loading="true"
        :transformData="transformData"
        :defaultPageSize="10"
        :pageSizeOptions="pageSizeOptions"
        :scroll="{ x: 790, y: 400 }"
        :rowDragEnd="rowDragEnd"
        @query="onQuery"
        @querySuccess="onQuerySuccess"
      >
        <template slot="action" slot-scope="{text, record}">
          <div>
            <a href="javascript:void(0)">查看</a>
            <a-divider type="vertical" />
            <a href="javascript:void(0)">编辑</a>
            <a-divider type="vertical" />
            <a href="javascript:void(0)">删除</a>
          </div>
        </template>
      </PagerTable>
    </div>
    <div>
      <a-space>
        <a-button type="primary" @click="refreshData">刷新当前页数据</a-button>
        <a-button type="primary" @click="refreshPage">刷新页面</a-button>
        <a-button type="primary" @click="toPage">跳转到第4页数据</a-button>
      </a-space>
    </div>
  </div>
</template>

<script>
import { Space, Input, Button, Divider } from 'ant-design-vue'
import moment from 'moment'

export default {
  name: 'Home',
  components: {
    ASpace: Space,
    AInput: Input,
    AButton: Button,
    ADivider: Divider
  },
  data() {
    return {
      pageSizeOptions: ['10', '30', '40'],
      // 对应UI视图层
      view: {
        name: ''
      },
      // 对应数据层
      query: {
        name: ''
      },
      columns: [{
        title: '序号',
        width: 60,
        scopedSlots: { customRender: 'incrementIndex' },
      }, {
        title: '姓名',
        dataIndex: 'name',
        width: 100,
        // fixed: 'left',
        // resizable: true,
        sorter: true,
        filters: [
          { text: 'Joe', value: 'Joe' },
          { text: 'Jim', value: 'Jim' },
        ],
      }, {
        title: '时间',
        dataIndex: 'timeText',
        width: 170,
        // resizable: true,
      }, {
        title: '邮箱',
        dataIndex: 'email',
        width: 140,
        scopedSlots: { customRender: 'overflow' },
        tooltip: { placement: 'topLeft' },
        // resizable: true
      }, {
        title: '地址',
        dataIndex: 'address',
        width: 140,
        scopedSlots: { customRender: 'overflow' },
        // resizable: true
      }, {
        title: '排序',
        dataIndex: 'dragSort',
        width: 60,
        scopedSlots: { customRender: 'dragSort' },
        // resizable: true
      }, {
        title: '操作',
        width: 180,
        scopedSlots: { customRender: 'action' },
        // fixed: 'right',
        // resizable: true
      }]
    }
  },
  methods: {
    queryList(params) {
      console.error('调用接口进行查询:', params)
      const promise = new Promise((resolve, reject) => {
        const list = []
        for (let i = 0; i < params.pageSize; i++) {
          list.push({
            id: `${params.pageNum}_${i}`,
            name: `张三_${params.pageNum}_${i}`,
            time: new Date().getTime(),
            email: '[email protected]',
            address: '斯柯达九分裤时间段客服监控斯柯达九分裤就可视对讲付款就看涉及到付款接口设计的开发就看手机打开房间看束带结发'
          })
        }

        const json = {
          list,
          current: params.pageNum,
          total: 1000
        }
        setTimeout(() => {
          resolve(json)
        }, 0)
      })

      return promise
    },
    transformData(list) {
      return list.map((obj) => {
        obj.timeText = moment(obj.time).format('YYYY-MM-DD HH:mm:ss')
        return obj
      })
    },
    showTotal(total) {
      return `总共 ${total} 条`
    },
    search() {
      this.query = Object.assign({}, this.query, {
        name: this.view.name
      })
    },
    onQuery() {
      console.error('开始查询')
    },
    onQuerySuccess(dataSource, pagination) {
      console.error('查询成功：', dataSource, pagination)
    },
    rowDragEnd(dragInfo, target) {
      return new Promise((reslove, reject) => {
        resolve('')
      })
    },
    refreshData() {
      const vm = this.$refs.pagerTableRef
      vm.refreshData()
    },
    refreshPage() {
      const vm = this.$refs.pagerTableRef
      vm.refreshPage()
    },
    toPage() {
      const vm = this.$refs.pagerTableRef
      vm.toPage(4, 30)
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  padding: 10px;
}

.query-panel {
  margin-bottom: 10px;
}
</style>