vueday02——使用NTableData

1.下载naivueui

2.按需导入,不要全局导入

注意不要导入错误组件或者写错组件名称

复制代码
import { NDataTable } from 'naive-ui'

3.定义表头和数据!!!

n-data-table标签必须要使用数据和数据 少一个都不能正确渲染!!!

复制代码
const data = ref([
    {
        key: 0,
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer']
    },
    {
        key: 1,
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['wow']
    },
    {
        key: 2,
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher']
    }
])

const column =ref([
    {
      title: 'Name',
      key: 'name'
    },
    {
      title: 'Age',
      key: 'age'
    },
    {
      title: 'Address',
      key: 'address'
    },
    {
      title: 'Tags',
      key: 'tags',
    }],
)

4.全部代码

复制代码
<!--
 * @Author: LiuQidong [email protected]
 * @Date: 2023-10-17 02:38:53
 * @LastEditors: LiuQidong [email protected]
 * @LastEditTime: 2023-10-17 09:26:20
 * @FilePath: \newvue2\src\components\helloLQD.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <n-data-table
    :data="data"
    :columns="column"
    :bordered="true"
  />
  <p>111</p>
</template>

<script setup="ts">
import { ref, defineComponent } from 'vue'
import { NDataTable } from 'naive-ui'

const data = ref([
    {
        key: 0,
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer']
    },
    {
        key: 1,
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['wow']
    },
    {
        key: 2,
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher']
    }
])

const column =ref([
    {
      title: 'Name',
      key: 'name'
    },
    {
      title: 'Age',
      key: 'age'
    },
    {
      title: 'Address',
      key: 'address'
    },
    {
      title: 'Tags',
      key: 'tags',
    }],
)
</script>

5.实际效果

相关推荐
Senar2 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
北辰浮光6 分钟前
[Mybatis-plus]
java·开发语言·mybatis
烛阴35 分钟前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
光而不耀@lgy39 分钟前
C++初登门槛
linux·开发语言·网络·c++·后端
lkbhua莱克瓦2444 分钟前
用C语言实现——一个中缀表达式的计算器。支持用户输入和动画演示过程。
c语言·开发语言·数据结构·链表·学习方法·交友·计算器
Mr__Miss1 小时前
面试踩过的坑
java·开发语言
啊丢_1 小时前
C++——Lambda表达式
开发语言·c++
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
Chh07152 小时前
《R语言SCI期刊论文绘图专题计划》大纲
开发语言·r语言
Yeats_Liao2 小时前
Go 语言 TCP 端口扫描器实现与 Goroutine 池原理
开发语言·tcp/ip·golang