ant design vue实现表格渲染(含隐藏默认分页器,自定义分页器,设置勾选表格,设置loading加载中)

1、直接上代码

<a-table
   :row-selection="rowSelection"
   :dataSource="tableList"
   :columns="columns"
   :scroll="{ x: '100%' }"
   :pagination="false"
   :loading="loading"
>
    <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operate'">
            <a class="a_color" @click="view(record)">查看</a>
        </template>
    </template>
</a-table>
<a-pagination
   v-if="tableList.length"
   v-model:current="current"
   :total="totalCount"
   :show-total="(total) => `共 ${total} 条数据`"
   @change="onChange"
/>


const columns = [
    {
      title: '变动类型',
      dataIndex: 'changeType',
      align: 'center',
    },
    {
      title: '操作',
      key: 'operate',
      align: 'center',
    },
  ];

const tableList = ref([]);

const loading = ref(false);
const current = ref(); //当前页数
const totalCount = ref(); //数据项总数

const onChange = (pageNumber: number, current: number) => {
    loading.value = true;
    // console.log('当前页数: ', pageNumber, '每页记录数', current);
    loading.value = false;
};

const rowSelection = ref({
    // checkStrictly: false,
  });

猜你喜欢

转载自blog.csdn.net/m0_62626838/article/details/143176983