vue3、antd，普通表格a-table设置分页页码显示，列中状态status根据值显示不同值，为1时显示‘正常’，2时显示‘异常’

在Vue3中，你可以结合Ant Design (antd) 的 Table 组件来创建一个动态分页并展示列中状态的表格。下面是一个简化的示例，展示了如何设置分页和基于 `status` 值显示不同文本：

首先，在项目中安装需要的依赖：

npm install antd @vue/cli-plugin-ant

然后在你的 Vue 文件中引入所需的组件：

<template>
  <div>
    <a-pagination :total="total" :current="currentPage" @change="handlePageChange"></a-pagination>
    <a-table :data="tableData" :columns="columns">
      <!-- ... -->
      <template slot-scope="scope">
        <span v-if="scope.row.status === 1">正常</span>
        <span v-else-if="scope.row.status === 2">异常</span>
        <!-- ... -->
      </template>
    </a-table>
  </div>
</template>

<script setup>
import { Table, Pagination } from 'ant-design-vue';

const total = 100; // 假设总数据条数
const currentPage = 1; // 当前页
const tableData = []; // 根据实际情况填充数据，包含status字段

function handlePageChange(page) {
  currentPage = page;
}

const columns = [
  {
    title: '状态',
    dataIndex: 'status',
    render: (text, record) => {
      return text === 1 ? '正常' : text === 2 ? '异常' : '';
    },
  },
  // 添加其他列...
];
</script>

在这个例子中，`Pagination` 组件用于分页，`Table` 中使用 `render` 属性来根据 `status` 字段渲染不同文字。