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.全部代码






5.实际效果

vueday02——使用NTableData_第1张图片

你可能感兴趣的:(javascript,开发语言,ecmascript)