antd-vue - - - - - table使用

场景需求如下：

• 自适应页面高度，表头固定，body可滚动
• 使用table自带分页器
• 切换页码，请求对应数据
• 操作列自定义

注意:

若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。

建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x。

<template>
  <div class="index-container m20 box-sizing p20">
    <!-- 表格 -->
    <a-table
      class="mt20"
      :loading="tableConfig.loading"
      :dataSource="tableConfig.dataSource"
      :columns="columns"
      bordered
      :pagination="paginationProps"
      :scroll="{ y: `calc(100vh - 300px)` }" 
    >
    <!-- :scroll="{ y: `calc(100vh - 300px)` }"  是设置固定头部，body可滚动 -->
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'operation'">
          <!-- 操作列 -->
          <edit-outlined class="blue cursor-pointer" />
          <delete-outlined class="red ml10 cursor-pointer" />
          <copy-outlined class="ml10 cursor-pointer" />
        </template>
      </template>
    </a-table>
  </div>
</template>
<script>
import {
      
       reactive, toRefs, computed } from "vue";
import {
      
      
  DeleteOutlined,
  CopyOutlined,
  EditOutlined
} from "@ant-design/icons-vue";

export default {
      
      
  name: "index",
  components: {
      
      
    DeleteOutlined,
    CopyOutlined,
    EditOutlined
  },
  setup() {
      
      
    // table相关数据
    const tableConfig = reactive({
      
      
      loading: false,
      total: 12,
      page: 1,
      pageSize: 10,
      dataSource:[
		  {
      
      
		    id: 0,
		    number: "0",
		    name: "0",
		  }, 
		  {
      
      
		    id: 1,
		    number: "1",
		    name: "1",
		  },
		]
    });

	// 列配置
    const columns = [
      {
      
      
        title: "数字",
        dataIndex: "number",
        key: "number",
        width: 150
      },
      {
      
      
        title: "姓名",
        dataIndex: "name",
        key: "name",
        minWidth: 150
      },
      {
      
      
        title: "操作",
        dataIndex: "operation"
      }
    ];

    // 分页器配置数据
    const paginationProps = reactive({
      
      
      total: tableConfig.total,
      pageSize: tableConfig.pageSize,
      hideOnSinglePage: false,
      showSizeChanger: false,
      showQuickJumper: false,
      showTotal: () => `共${ 
        tableConfig.total}条`,
      onChange: current => changePage(current)
    });
    
    /**
     * 切换页码 重新获取列表数据
     */
    const changePage = current => {
      
      
      tableConfig.page = current;
      getList();
    };
    
    /**
     * 获取列表数据
     * 需要在此设置 tableConfig 必须的部分值： total、loading、dataSource
     */
	const getList = ()=>{
      
      
		// Do something...
	}

    return {
      
      
      tableConfig,
      columns,
      paginationProps
    };
  }
};
</script>
<style lang="scss" scoped>
.red {
      
      
  color: red;
}
.blue {
      
      
  color: blue;
}
</style>