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<string>("")
// projects的计算属性
const data = computed(() => {
if (searchValue.value !== "")
return projects.value.filter((item) => item.name.includes(searchValue.value) || item.pid.includes(searchValue.value))
else
return projects.value
})
6.在所有的组件加载完成之后,执行下面的函数。
最后所有的代码:
<script lang="ts" setup>
import { ref, onMounted, h, computed } from 'vue'
import request from '@/tools/request'
import { NButton, NSpace } from 'naive-ui'
const projects = ref<project[]>([])
//获取项目方法
const getProjects = async () => {
//获取项目具体信息
const response = await request.post("/project/get", { filter: false })
if (response.data.code = 200) {
//将项目的具体信息交给projects
projects.value = response.data.data
}
}
// 表格的表头
const col = [
{
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: "status",
// title: "项目状态",
// width: 150,
// render: (row: project) => {
// if (row.delFlag)
// return h("span", {}, "已删除")
// else {
// if (row.status === 0)
// return h("span", {}, "未审核")
// if (row.status === 1)
// return h("span", {}, "校级")
// if (row.status === 2)
// return h("span", {}, "省级")
// if (row.status === 3)
// return h("span", {}, "国家级")
// }
// },
// defaultFilterOptionValues: [0, 1, 2, 3, 4],
// filterOptions: [
// {
// label: "未审核",
// value: 0
// },
// {
// label: "校级",
// value: 1
// },
// {
// label: "省级",
// value: 2
// },
// {
// label: "国家级",
// value: 3
// },
// {
// label: "已删除",
// value: 4
// }
// ],
// filter(value: number, row: project) {
// if (value !== 4)
// return row.status === value && row.delFlag === 0
// else
// return row.delFlag === 1
// }
// },
{
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
}
}
]
// 搜索框
const searchValue = ref<string>("")
// projects的计算属性
const projectsList = computed(() => {
if (searchValue.value !== "")
return projects.value.filter((item) => item.name.includes(searchValue.value) || item.pid.includes(searchValue.value))
else
return projects.value
})
//要求在所有组件加载完执行命令
onMounted(() => {
getProjects()
})
</script>
<template>
<n-page-header subtitle="无论谁都犯过错不是么?">
<n-grid :cols="5">
<n-gi>
<n-statistic label="现有项目数量" :value="projects.filter((item) => item.delFlag === 0).length" />
</n-gi>
<n-gi>
<n-statistic label="校级项目数量" :value="projects.filter((item) => item.status === 1 && item.delFlag === 0).length" />
</n-gi>
<n-gi>
<n-statistic label="省级项目数量" :value="projects.filter((item) => item.status === 2 && item.delFlag === 0).length" />
</n-gi>
<n-gi>
<n-statistic label="国家级项目数量" :value="projects.filter((item) => item.status === 3 && item.delFlag === 0).length" />
</n-gi>
<n-gi>
<n-statistic label="已删除项目数量" :value="projects.filter((item) => item.delFlag === 1).length" />
</n-gi>
</n-grid>
<template #title>
<a href="#" style="text-decoration: none; color: inherit">项目管理</a>
</template>
<template #extra>
<n-input v-model:value="searchValue" type="text" placeholder="根据项目编号或项目名称搜索" />
<n-button type="success">添加新项目</n-button>
</template>
</n-page-header>
<!-- <n-space>
<n-input v-model:value="searchValue" type="text" placeholder="模糊搜索" />
</n-space> -->
<n-data-table style="margin-top: 10px;" :columns="col" :data="projectsList" />
</template>