antdesign写表格

<a-table 
  :columns="columnsRecord" 
  :data-source="dataRecord" 
  :pagination="paginationProps" 
  :rowKey="(record,index)=>{return index}"
  :row-selection="rowSelection"
  :scroll="{ y: 600 }" 
  bordered 
  class="typeTable" 
  size="small" 
  :loading="loading"
  @change="handleTableChange"
/>
/* 
scroll 设置表格的宽高，以及横向or纵向滚动
bordered 是否展示表格边框和列表框  true  false
rowKey 必须写，不写报错
onChange 选中项发生变化时的回调   handleTableChange是触发分页的时间
row-selection 列表的配置项，详见文档  有这个属性表格前就会显示复选框
*/
<script>
export default {
  data() {
    return {
       columnsRecord: [    // 表格的每一列要展示的数据, key 和 dataIndex要和接口返回的字段一致，不然不显示数据
		{		   
          title: '#',    // 序号，自己通过customRender定义的，不是后台反的
          dataIndex: 'num',
          key: 'num', 
          width: 50,
          align: 'center',
          fixed: true,
          customRender: (text,record,index) => `${index+1}`,        
		},
		{
          title: '节点',
          dataIndex: 'verifynode',
          key: 'verifynode',
          width: '15%',
          align: 'center'
        },
        {
          title: '意见',
          dataIndex: 'docontent',
          key: 'docontent',
          width: '17%',
          ellipsis: true,    // 允许一行显示不全就显示省略号，设置false时一行显示不全就会自动换行
          align: 'center'
        },
	  ],
	  dataRecord: [],   // 表格的数据，调接口，把接口返回的数据赋值给dataRecord就行
	  
	  paginationProps: {
	    current: 1,  // 默认页数
	    defaultCurrent: 1,  // 默认的当前页数
	    pageSize: 10,  // 每页条数
	    showSizeChanger: true,  // 是否可以改变页码
	    showQuickJumper: true,  // 是否可以快速跳至某一页
	    total: 0  // 数据总数
	  },

	  loading: false,
    },
  },
  computed: {
    rowSelection() {
      return {
      	// selectedRowKeys 是当前选中行的key，是个数组；selectedRows是当前选中行的所有数据，也是个数组
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys;
          this.hasSelected = true
          // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({  // record是当前选中行的数据
          props: {
            disabled: record.rbstate !== '1', // Column configuration not to be checked
          },
        }),
      };
    },
  },
  created() {
  	this.getrecord()
  },
  methods: {
	handleTableChange(pagination) {   // pagination 是点击页码后，当前页的paginationProps的数据
	  const pager = { ...this.paginationProps};   // 先存一下paginationProps
      pager.current = pagination.current; 
      this.paginationProps= pager;
      // 调接口获取表格数据
	  let data = {
        dataId: this.dataId,
        pageNo: pagination.current,   // 传的是当前点击的页码
        pageSize: pagination.pageSize  //传的是当前点击的页数
      }
      approverecord(data).then(res => {   // 接口
        if(res.code === 200) {
          this.loading = false
          this.dataRecord = res.result.records

          this.paginationProps.total = res.result.total   // 总数据条数，这样才会自动展示分页
          this.paginationProps.current = res.result.current   // 后端返回的当前页码，赋值后，前台表格的页码才会改变显示，不写这句，页码会一直显示在第一页，但数据实际上已经是第二页的数据
          this.paginationProps.pageSize = res.result.size  // 每页要显示的数据数量
        }
      })
	},
	// 一进入页面时，也要调下接口，先获取表格第一页的数据渲染
	getrecord() {
      console.log(this.paginationProps.current)
      this.$nextTick(() => {
        this.loading = true
        let data = {
          dataId: this.dataId,
          pageNo: this.paginationProps.current,
          pageSize: this.paginationProps.pageSize
        } 
        approverecord(data).then(res => {
          if(res.code === 200) {
            this.loading = false
            this.dataRecord = res.result.records

            this.paginationProps.total = res.result.total
            this.paginationProps.current = res.result.current
            // console.log(res.result)
            this.paginationProps.pageSize = res.result.size
          }
        })
      })
    } 
  }
}
</script>