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 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.实际效果