antd a-table表格添加序号和分页总数——基础积累

antd a-table表格添加序号和分页总数——基础积累

效果

1.a-table组件的使用

<a-table
  :rowKey="(r, i) => i"
  :columns="columns"
  :scroll="{ y: screenHeight, x: 1400 }"
  :dataSource="messageList"
  bordered
  :pagination="pagination"
  @change="handleTableChange"
  :loading="loading"
>
  <div slot="action" slot-scope="record">
    <a
      href="javascript:;"
      @click="$refs.createModal.openModal(record, true)"
      >详情</a
    >
  </div>
</a-table>

看下组件中的属性：

1. rowkey :表格中每一行的唯一值，是一个动态绑定的数据，可以取每行中的id，也可以直接使用每行的索引值i
2. columns :表格中的列，具体要展示的列
3. scroll :表格的横纵向是否出现滚动条，如果超过指定的宽度或高度，就需要出现滚动条
4. dataSource :表格的数据，是一个数组
5. bordered :表格边框，bordered表示表格要有边框
6. pagination :分页数据
7. change :改变表格数据时触发，比如切换页码与页容量时。
8. loading :表格数据加载时的加载状态loading展示

2.a-table组件添加索引

const columns = [
  {
   
   
    title: "序号",
    width: 70,
    customRender: (text, record, index) => `${
   
   index + 1}`,
  },
]

3.a-table添加表格总数

pagination: {
   
   
  pageIndex: 1,
  pageSize: 10,
  total: 0,
  showTotal: (total) => `共 ${
   
   total} 条数据`, // 展示总共有几条数据
},

获取表格数据后，设置total总数。

this.$message.success("数据获取成功");
this.messageList = (res.data && res.data.items) || [];
const pagination = {
   
    ...this.pagination };
pagination.total =
  (res.data && res.data.items && res.data.total) || 0;
this.pagination = pagination;

改变表格数据后，也就是handleTableChange函数：

handleTableChange(pagination, filters, sorter) {
   
   
// 或者直接让pageIndex等于pagination就可以了，不要下面代码
  const pager = {
   
    ...this.pagination };
  pager.pageIndex = pagination.current;
  this.pagination = pager;
  this.getList();//获取表格数据的接口
},

最完整的pagination分页配置

const pagination = {
   
   
    showSizeChanger:true,
    showQuickJumper:true,
    total:pagination.totalData,//数据总数
    pageSize:10,
    current:1,
    showTotal:((total)=>{
   
   
        return `共${
   
   total}条`
    })
}

转自：https://blog.csdn.net/yehaocheng520/article/details/122854893