antDesignVue表格

<template>

      <a-table

        :pagination="ipagination"

        @change="handleTableChange"

        :columns="columns"

        :row-selection="rowSelection"

        :data-source="dataList"

        rowKey="code"

        :scroll="{ x: 500, y: 250 }"

      >

      </a-table>

</template>

<script>

export default {

  data() {

    return {

      columns: [

        {

          title: '姓名',

          dataIndex: 'userName',

          align: "center",

        },

        {

          title: '手机号',

          dataIndex: 'telphone',

          align: "center",

        },

      ],//表头

      dataList: [

        {

          updateTime: '2022',

          userName: '小林',

          code: '1',

          telphone: '11111111111',

        },

        {

          updateTime: '2022',

          userName: '小黄',

          code: '2',

          telphone: '12222222222'

        },

      ],//表格

      selectList: [],//选择列表

      selectedRowKeys: [],

      ipagination:{

        pageSize: 10,//每页中显示10条数据

        showSizeChanger: true,

        pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据

        showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据

      },

      pageSize:10,

      pageNum:1,

    }

  },

  computed: {

    rowSelection() {

      return {

        //onChange方法，rowSelection改变时触发

        onChange: (selectedRowKeys, list) => {

          //获取选中行的key元素，和下面selectedRowKeys属性配合使用，表示给rowSelection绑定一个v-model，为this.selectedRowKeys

          this.selectedRowKeys = selectedRowKeys

          //获取选中的行的所有元素

          this.selectList = list

        },

        selectedRowKeys: this.selectedRowKeys

      }

    }

  },

  methods: {

    handleTableChange(val){//分页

      this.pageSize=val.pageSize

      this.pageNum=val.pageNum

    }

  }

}

</script>

<style scoped>

</style>