Vue3+TS 结合ant design实现简单列表页和详情页

最近在做项目的时候，因为接触的比较多的基本上就是列表页和详情页，列表页主要就是类似于一个表格，展示所有数据，详情页主要就是指某条数据的详细信息，包括修改、新建一条数据、查看等都是对应详情页面，因此本次主要是想做一个关于列表页和详情页的实现的小分享,用到的技术栈是Vue3+Ts，使用到的组件库是ant design和tailwindcss。具体实现的页面可以看下图所示。

该页面是列表页，主要展示了用户的基本数据 ，勾选一条数据后可以点击查看，点击删除后可删除当前数据。

 点击新建数据按钮后，进入到新建数据详情页，该页面是一个表单，用户输入完信息后提交校验通过后会在列表页新增一条数据。

在列表页选中一条数据后，点击查看，跳转到该条数据的详情页，详情页中展示该条数据的全部信息。

 

 

 在详情页中点击修改按钮后可对当前数据进行修改，修改完成后点击提交，会改变当前数据的信息。

整体来说还是非常简单的，就是两个页面，一个列表页，一个详情页。下面来说一下具体的实现思路：

        在实际项目中，所有的数据都是从后端获取的，因此所做的所有改变都会通过接口请求发送给后端，然后再次请求数据刷新页面。这里我是弄了一些假数据，在页面初始化的时候赋值，由于在列表页和详情页中切换时，我都是把所有数据进行路由传参，因此可以不用担心刷新页面而导致数据丢失的问题。

由于新建页面和查看详情页、编辑页都是对应同一个页面，因此考虑到组件的复用性，采用表单的结合v-if的形式进行控制。

const routes = [
  {
    path: "/",
    component: () => import("../ant-table/Table.vue"),
  },
  {
    path: "/details",
    name: "details",
    component: () => import("../view/Detail.vue"),
  },
]

 路由配置如图，默认进入列表页。

下面正式开始页面编写：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts"></script>

这里是App根组件，路由切换时用来呈现的内容。

interface DataType {
  name: string;
  age: string;
  address: any;
  sex: string;
  school: string;
  hobby: any;
  birthday: any;
  phone: string;
  description: string;
  position: {
    isShow: boolean;
    place: string;
  };
}

定义数据类型，方便类型检测和书写规范。

    <a-table
      :row-selection="{
        type: 'radio',
        selectedRowKeys: rowSelection.selectedRowKeys,
        onChange: onSelectChange,
      }"
      rowKey="name"
      :columns="columns"
      :data-source="data"
    >
      <template #bodyCell="{ column, record, text, index }">
        <template v-if="column.dataIndex === 'operation'">
          <span class="text-yn-400">
            <delete