Ant Design Vue中的table与pagination的联合使用方式_vue.js_

         // slot="action" 插槽名      // slot-scope="record" // 该插槽内部能搞抓取到的改行的数据      // 也可展示改行对应的内容 {{ record.name }}     编辑          删除   

columns: [   {     title: '性别', // 该列展示的title     dataIndex: 'sex', // 对应标志，与dataSource中数据匹配的标识符，支持"info.sex"的方式     filters: [ // 筛选功能，该数组表示刷选的选项值，change事件获取的为 value，text为展示内容       { text: '男', value: 'male' },       { text: '女', value: 'female' },     ],     filterMultiple: false, // false为单选     filteredValue: [], // 受控状态，加上它时，则需要在change事件中，手动的给它赋值，     // 它表示选中的数据，对应的数据高亮，可以手动清除状态   },   {     title: '登记日期',     dataIndex: 'registDate',      sorter: true, // true，表示该列出现排序icon,在change事件中，能监听到对应的数据变化   },   {     width: '100px', // 该列的宽度，支持百分比等     title: '操作',     key: 'action',     dataIndex: '',     fixed: 'right',     scopedSlots: { customRender: 'action' }, // customRender 对应table中的插槽名，可以在每行自定义展示的内容，   }, ],

[{   id: '1',   sex: 'John Brown',   age: 32,   registDate: '2019-05-09', }]

pagination: {   // 分页配置器   pageSize: 10, // 一页的数据限制   current: 1, // 当前页   total: 10, // 总数   hideOnSinglePage: false, // 只有一页时是否隐藏分页器   showQuickJumper: true, // 是否可以快速跳转至某页   showSizeChanger: true, // 是否可以改变 pageSize   pageSizeOptions: ['5', '10', '30'], // 指定每页可以显示多少条   // onShowSizeChange: (current, pagesize) => { // 改变 pageSize时的回调   //   this.pagination.current = current   //   this.pagination.pageSize = pagesize   //   ....   // },   // onChange: (current) => { // 切换分页时的回调，   // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug   //   this.pagination.current = current   // },   showTotal: total => `总数：${total}人`, // 可以展示总数 },

{ x: number , y: number }

// 在页面初始化的时候调用事件，去判断该如何展示 const screenWidth = document.body.clientWidth if (screenWidth >= 1366 && this.screenWidth <= 1540) {   this.scroll.x = '115%' } else if (screenWidth < 1366) {   this.scroll.x = '125%' }

// table中使用 :rowKey={record => record.uid} // 事件 setTableKey(record) {   return record.id }

// 点击行，展示对应的数据,写在data中 customClick: record => ({   on: { // 事件     click: () => {       // 点击改行时要做的事情       // ......     },   }, }),

handleTableChange(pagination, filters, sorter) {   console.log(pagination, filters, sorter) }