1.创建最基本的vue格式

利用v快捷键

 2.在组件库中复制前端标签

修改或删掉多余的部分

 3.开始编写table的列信息和内容

 添加语言配置，和setup语法糖，加入引用

import { ref, onMounted, h, computed } from 'vue'
import request from '@/tools/request'
import { NButton, NSpace } from 'naive-ui'

编写列信息

const columns = [{key: "pid",title: "项目编号",width: 150},{key: "name",title: "项目名称",},{key:"status",title:"项目类型",render(row:project) {if(row.status==1){return h("span",{},"校级")}if(row.status==2){return h("span",{},"省级")}if(row.status==3){return h("span",{},"国家级")}},},{key:"user",title:"项目负责人",render(r123:project) {return h("span",{},"学生"+"["+r123.user.uid+"]")},},{key:"guideUser",title:"项目指导老师",render(r213:project) {return h("span",{},"老师"+r213.guideUser.name+"["+r213.guideUser.id+"]")},},{key: "actions",title: "操作",render: (row: project) => {const del = h(NButton,{type: row.delFlag === 1 ? 'success' : 'error',strong: true,tertiary: true,onClick: async () => {const res = await request.post("/project/del", {id: row.id,delFlag: row.delFlag === 1 ? 0 : 1})if (res.data.code === 200) {window.$message.success("删除成功")getProjects()} else {window.$message.error("删除失败")}}},{ default: () => row.delFlag === 1 ? "恢复" : "删除" })const space = h(NSpace, {}, { default: () => [del] })return space}}
]

这里有的列展示的属性，实体类中已经有，就只有key和title就行。 

像是上面这两个，没有直接的属性，要自己写个render，render的格式如上图。

4.接下来是要编写表格的内容data，在这之前还要创建一个获取数据的函数。

 ref关键字修饰的是ref响应常数，获取项目的方法，用关键字async修饰。

用response常量来代存通过后端接口请求得到的信息

5.接下来的步骤直接复制代码，具体什么作用我也不知道，但是没有这段代码，还不行

//这里直接复制了搜索，如果搜到匹配的就直接展示
// 搜索框
const searchValue = ref("")// projects的计算属性
const data = computed(() => {if (searchValue.value !== "")return projects.value.filter((item) => item.name.includes(searchValue.value) || item.pid.includes(searchValue.value))elsereturn projects.value
})

 6.在所有的组件加载完成之后，执行下面的函数。

最后所有的代码：