1. Uso básico
1. Importar tablas y datos
<-- 表格标签 -->
<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']
}
])Una tabla tan básica se presenta
2. Modifique el estilo de etiqueta del botón de operación, etc.
Es posible modificar el estilo de elementos como botones de operación y etiquetas en el proyecto. Tomando los botones como ejemplo, se proporcionan los siguientes métodos (cabe tener en cuenta que se deben proporcionar plantillas de elementos HTML cuando se usan botones, etiquetas y otros elementos). en tablas de datos de interfaz de usuario ingenuas; de lo contrario, se generarán errores. La llamada plantilla es en realidad un componente)
1. La plantilla proporcionada por la interfaz de usuario ingenua
{
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: () => '删除' }
)
]
}
}Esto renderizará el botón
2. Plantilla de botón personalizada
Es posible que la plantilla proporcionada por naive en el proyecto no cumpla con los requisitos, entonces puede usar una plantilla personalizada (componente)
① Definir un archivo de componente
<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>②Introduzca el componente en la página y utilícelo
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),
},
],
}
)
}
}Esto renderizará el botón
3. Mostrar contenido diferente según los datos.
En el proyecto, se puede mostrar contenido diferente en la tabla según los datos devueltos por el fondo, lo que se puede lograr de las siguientes maneras
{
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'却会报错，我也搞不懂，有了解的伙伴可以解释一下
}
},Finalmente, se puede representar contenido diferente según los datos.
4. Diferentes contenidos muestran diferentes estilos
Los diferentes contenidos de la tabla en el proyecto mostrarán diferentes estilos, y se proporcionan los siguientes métodos para lograrlo.
① Agregue el atributo del estilo de retorno a la etiqueta de la tabla: fila-clase-nombre="filaClaseNombre"
<n-data-table :bordered="false" :single-line="false" :columns="tableHead" :data="tabeldata"
:row-class-name="rowClassName" />② Defina una función que devuelva el nombre de la clase
const rowClassName = (row) => {
if (row.status == '0') {
return 'statusin'
}
return 'statusout'
}③ Escriba estilos correspondientes a diferentes nombres de clases en estilo
:deep(.statusin .stustatus) {
color: rgba(63, 210, 19, 0.75) !important;
}
:deep(.statusout .stustatus) {
color: rgba(251, 8, 61, 0.75) !important;
}④Agregue el atributo de nombre de clase className: 'stustatus' al objeto de encabezado de la columna correspondiente
{
title: '状态',
key: 'status',
className: 'stustatus',
render(record) {
let text = ''
if (record.status == '0') {
text = '在读'
} else if (record.status == '1') {
text = '毕业'
}
return h('span', text)
}
},Finalmente se renderiza el formulario.
También comencé a usar vue3 + naive ui en la última iteración del proyecto y encontré muchos problemas durante el proceso de desarrollo. Hay muy pocos artículos relacionados con naive ui en Internet, por lo que solo puedo leer los documentos y estudiar lentamente, y lo haré. Continúe estudiando Artículos de actualización relacionados con la interfaz de usuario ingenua, en resumen, lea más documentos. Si hay otras soluciones a los problemas anteriores, comuníquese.