Vue 利用naive组件库实现data table （笔记）

最新推荐文章于 2024-07-02 16:26:35 发布

白8080

最新推荐文章于 2024-07-02 16:26:35 发布

阅读量1.8k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_68177269/article/details/129402869

版权

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>