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 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.实际效果文章来源:https://www.toymoban.com/news/detail-724388.html
文章来源地址https://www.toymoban.com/news/detail-724388.html
到了这里,关于vueday02——使用NTableData的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!