vueday02——使用NTableData

这篇具有很好参考价值的文章主要介绍了vueday02——使用NTableData。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.下载naivueui

vueday02——使用NTableData,javascript,开发语言,ecmascript

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 254818216@qq.com
 * @Date: 2023-10-17 02:38:53
 * @LastEditors: LiuQidong 254818216@qq.com
 * @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.实际效果

vueday02——使用NTableData,javascript,开发语言,ecmascript文章来源地址https://www.toymoban.com/news/detail-724388.html

到了这里,关于vueday02——使用NTableData的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity 游戏开发、02 基础篇 | 知识补充、简单使用动画、动画状态机

    Unity 游戏开发、01 基础篇 Q 手型工具(鼠标中键): 上下左右移动场景 ALT + 鼠标左键: 以视图为中心旋转 鼠标右键: 以观察者为中心旋转 SHIFT + Gizmo方块: Y轴归位 物体节点 + F: 观察者定位至物体 3D项目一般窗口布局如下 全局光照GI(Glballlumination)(编辑模式下才能生成

    2024年02月09日
    浏览(69)
  • JavaScript基础语法02——JS书写位置

    哈喽,大家好,我是雷工! 今天继续学习JavaScript基础语法,JS的书写位置,俗话说:好记性不如烂笔头,边学边记,方便回顾。 代码写在标签内部 示例: 2.1、要将JS代码直接写在HTML文件里面。 2.2、在HTML文件中添加一个script,用script标签包住,script标签中的代码就是JS代码

    2024年02月10日
    浏览(42)
  • day02-JavaScript-Vue

    html完成了架子,css做了美化,但是网页是死的,我们需要给他注入灵魂,所以接下来我们需要学习JavaScript,这门语言会让我们的页面能够和用户进行交互。 1.5.1.3 JSON对象 自定义对象 在 JavaScript 中自定义对象特别简单,其语法格式如下: 我们可以通过如下语法调用属性:

    2024年02月08日
    浏览(37)
  • 【手写数据库toadb】02 开发数据库内核准备阶段-git工具使用

    ​ 专栏内容 : 手写数据库toadb 本专栏主要介绍如何从零开发,开发的步骤,以及开发过程中的涉及的原理,遇到的问题等,让大家能跟上并且可以一起开发,让每个需要的人成为参与者。 本专栏会定期更新,对应的代码也会定期更新,每个阶段的代码会打上tag,方便阶段学

    2024年01月24日
    浏览(48)
  • chrome插件开发实例02-使用content_scripts对用户浏览页面操作

    目录 引言 chrome插件 插件演示 源代码 manifest.json content_scripts.js

    2024年02月14日
    浏览(35)
  • 「Vue|网页开发|前端开发」02 从单页面到多页面网站:使用路由实现网站多个页面的展示和跳转

    本文主要介绍如何使用路由控制来实现将一个单页面网站扩展成多页面网站,包括页面扩展的逻辑,vue的官方路由vue-router的基本用法以及扩展用法 「Vue|网页开发|前端开发」01 快速入门:快速写一个Vue的HelloWorld项目 我们在进行网站开发的时候,大多数都是需要有多个页面

    2024年02月11日
    浏览(48)
  • 跟着pink老师前端入门教程(JavaScript)-day02

    1、什么是变量 白话:变量就是一个装东西的盒子 通俗:变量是用于存储数据的‘ 容器 ’,通过 变量名 获取数据,甚至数据可以修改 注意: 变量不是数据本身,它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。 2、变量在内存中的存储 本质

    2024年02月20日
    浏览(47)
  • 米尔瑞萨RZ/G2L开发板-02 ffmpeg的使用和RTMP直播

    最近不知道是不是熬夜太多,然后记忆力减退了? 因为板子回来以后我就迫不及待的试了一下板子,然后发现板子有SSH,但是并没有ffmpeg,最近总是在玩,然后今天说是把板子还原一下哇,然后把官方的固件刷了进去,然后惊奇的事情发生了,现在板子没有SSH,但是有ffmpe

    2024年02月12日
    浏览(36)
  • Datawhale Django后端开发入门 Vscode TASK02 Admin管理员、外键的使用

    一.Admin管理员的使用 1、启动django服务 使用创建管理员之前,一定要先启动django服务,虽然TASK01和TASK02是分开的,但是进行第二个流程的时候记得先启动django服务,注意此时是在你的项目文件夹下启动的,时刻注意要执行的文件夹。 我这里又重新创建了一个虚拟环境,此时的

    2024年02月12日
    浏览(44)
  • 06~12-Esp8266物联网芯片的使用(一)-part02/03-ESP8266开发环境、编程举例

    上一章主要作了芯片介绍,这一章主要作对开发环境的介绍。 认识Arduino Arduino是一款便捷灵活、方便上手的开源电子原型平台。包含硬件(各种型号的Arduino板)和软件(ArduinoIDE)。它构建于开放原始码simple I/O介面版,并且具有使用类似Java、C语言的Processing/Wiring开发环境。

    2024年02月05日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包