vue3+Naive UI数据表格基本使用方式(vue ui怎么用)

vue3+Naive UI数据表格基本使用方式 一、基础使用方式

推荐整理分享vue3+Naive UI数据表格基本使用方式(vue ui怎么用)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue ui怎么用,vue ui怎么用,vue3 $on,vue的ui,vue3.0 ui库,vue3 $on,vue 3.1,vue3.0 ui库,内容如对您有帮助，希望把文章链接给更多的朋友！

1.引入表格及数据

<-- 表格标签 --><n-data-table :bordered="false" :single-line="false" :columns="tableHead" :data="tabeldata"/>//表头数据 一个对象表示一列 titel是每一列的名字 key是对应的字段名 可在对象类写每一列的宽度居中方式等样式const tableHead = ref([ { title: '姓名', key: 'name', width: 300, align: 'center', }, { title: '年龄', key: 'age' }, { title: '地址', key: 'address' }, { title: '标签', key: 'tags', render(row) { const tags = row.tags.map((tagKey) => { return h( NTag, { style: { marginRight: '6px' }, type: 'info', bordered: false }, { default: () => tagKey } ) }) return tags } }, { title: '状态', key: 'status' }, { title: '操作', key: 'actions', //添加按钮时必须有模板组件，将按钮信息以参数形式传到组件中，在组件中写相关样式 或 使用naive ui提供的组件 render(record) { return [ h(NButton, { //NButton是naive ui提供的按钮组件模板，需要引入 import { NTag, NButton, } from 'naive-ui' text: true, style: { marginRight: '10px' }, onClick: () => viewdetail(record) }, { default: () => '详情' } ), h(NButton, { text: true, onClick: () => deletedata(record) }, { default: () => '删除' } ) ] } }])//表格数据const tabeldata = ref([ { key: 0, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', status: '0', tags: ['nice', 'developer'] }, { key: 1, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', status: '1', tags: ['wow'] }, { key: 2, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', status: '0', tags: ['cool', 'teacher'] }])

 这样一个基础表格就渲染出来了

 二、修改操作按钮等标签样式

项目中可能会修改操作按钮、标签等元素样式修改，以按钮为例，提供以下方式（需要注意的是，在naive ui数据表格中使用按钮、标签等元素必须提供HTML元素模板，否则渲染出错，所谓模板其实就是一个组件）

1.naive ui提供的模板{ title: '操作', key: 'actions', //使用naive ui提供的按钮模板，需要引入按钮模板 import { NButton } from 'naive-ui' render(record) { return [ h(NButton, {//可在里面写按钮样式 text: true, style: { marginRight: '10px' }, onClick: () => viewdetail(record)//点击按钮后的回调 }, { default: () => '详情' }//按钮显示名称 ), h(NButton, { info: true, onClick: () => deletedata(record) }, { default: () => '删除' } ) ] } }

这样就可以渲染出按钮

2.自定义按钮模板 

项目中使用naive提供的模板可能满足不了需求，这时可以使用自定义模板（组件）

①定义一个组件文件

<template> <div> <template v-for="(action, index) in getActions" :key="index"> <n-button v-bind="action" style="margin-right: 10px;" text> {{ action.label }} </n-button> </template> </div></template><script lang="ts">import { defineComponent, PropType, computed, toRaw, onMounted } from 'vue';export default defineComponent({ props: { actions: { type: Object, default: null, required: true, }, }, setup(props) { onMounted(() => { // console.log(props); }) const getActions = computed(() => { return props.actions }); return { getActions, }; },});</script>

②页面中引入该组件并使用

import ActionTemplate from '@/components/ActionTemplate.vue'{ title: '操作', key: 'actions', render(record) { return h(ActionTemplate,//使用按钮组件 { actions: [//通过props传参将actions传给按钮组件（对应样式也可传递过去） { label: '删除', onClick: deletedata.bind(null, record), }, { label: '详情', onClick: viewdetail.bind(null, record), }, ], } ) } }

这样就可以渲染出按钮

 三、根据数据显示不同内容

项目中可能会根据后台返回的数据在表格中显示不同内容，可以通过以下方式实现

{ title: '状态', key: 'status', className: 'stustatus', render(record) { let text = '' if (record.status == '0') { text = '在读' } else if (record.status == '1') { text = '毕业' } return h('span', text)//这种渲染方式与渲染按钮操作一样必须提供元素模板，但是这里直接这样写'span'就可以，而渲染操作按钮的时候写'n-button'却会报错，我也搞不懂，有了解的伙伴可以解释一下 } },

最后就可以根据数据渲染不同内容了

 四、不同内容显示不同样式

项目中表格不同内容会显示不同的样式，提供以下方式实现

①在表格标签中加上返回样式的属性 :row-class-name="rowClassName"

<n-data-table :bordered="false" :single-line="false" :columns="tableHead" :data="tabeldata" :row-class-name="rowClassName" />

 ②定义返回类名的函数

const rowClassName = (row) => { if (row.status == '0') { return 'statusin' } return 'statusout'}

 ③在style中写不同类名对应的样式

:deep(.statusin .stustatus) { color: rgba(63, 210, 19, 0.75) !important;}:deep(.statusout .stustatus) { color: rgba(251, 8, 61, 0.75) !important;}

④在对应列的表头对象里面加入类名属性 className: 'stustatus'

{ title: '状态', key: 'status', className: 'stustatus', render(record) { let text = '' if (record.status == '0') { text = '在读' } else if (record.status == '1') { text = '毕业' } return h('span', text) } },

最后表格就渲染出来了

 我也是在最近的项目迭代中开始使用的vue3+naive ui，开发过程中也遇到很多问题，网上与naive ui相关的文章太少了，也只能看文档慢慢研究，后面也会不断地更新与naive ui相关的文章，总之多看看文档吧。以上问题如果有其他解决方法的话欢迎交流。