ant-design-vue 的Table组件 ＋ 分页器 基础使用

在Table标签中加上配置pagination,传入一个reactive对象。

• template

<Table
      bordered
      :columns="resultColumns"
      :data-source="tableData"
      :scroll="{ x: 1000 }"
      :pagination="pagination"
      ellipsis
    >
      <template #operation="{ record, index }">
        <a @click="viewRow(record, index)">详情</a>
        <Divider type="vertical" />
        <a @click="editRow(record)">修改</a>
        <Divider type="vertical" />
        <a @click="deleteRow(record.key)">删除</a>
      </template>
    </Table>

• script

  // 分页配置
  const pagination = reactive({
    current: 1,	// 初始页数
    pageSize: 10, // 初始条数
    total: 0,	// 初始总数
    pageSizeOptions: ['10', '20', '30', '40'], // 可选一页展示数
    showSizeChanger: true,  // 是否可改变每页数量
    showTotal: (total) => `共 ${total} 条数`,
    // 绑定页数改变事件
    onChange: (current) => pageChange(current), 
    // 绑定条数改变事件
    onShowSizeChange: (_, pageSize) => pageSizeChange(pageSize), 
  });

  // 页数改变
  const pageChange = (current) => {
    pagination.current = current;
  };

  // 条数改变
  const pageSizeChange = (pageSize) => {
    pagination.pageSize = pageSize;
  };

  // Table 中的 查 删 改
  const viewRow= (e) => {
    e;
  };
  const editRow= (e) => {
    e;
  };
  const deleteRow= (e) => {
    e;
  };

详情可查阅 ant-design-vue 官网配置 Table组件

以上

- END -