Naive UI Admin后台管理系统的组件BasicTable使用指南

Naive Ui Admin 是一个基于 Vue3.0、 Vite、 Naive UI、 TypeScript 的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目， 相信不管是从新技术使用还是其他方面，都能帮助到你。

项目地址：https://github.com/jekip/naive-ui-admin

通过阅读源码，整理了基于Navie UI封装的较为完善的BasicTable组件的使用指南。

BasicTable

BasicTable的示例网址：https://v1.naiveadmin.com/#/list/basic-list
官网使用教程：https://docs.naiveadmin.com/components/table.html#basictable

BasicTable集成了很多功能，如下：

• 分页信息，可以自定义分页字段名，方便和后端做数据交互
• 可编辑单元格，通过配置column的edit属性使该列渲染为可编辑组件，同时支持整行编辑。
• 基础工具，包括表格斑马纹显示、刷新、密度以及列相关的设置选项
• 动态计算调整表格的高度

开始

本节会帮你快速了解BasicTable的使用

基础使用

创建一个vue文件，使用BasicTable

<template>
  <n-card :bordered="false" class="proCard">
    <BasicTable
      :columns="columns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      :scroll-x="1000"
      @update:checked-row-keys="onCheckedRow"
    />
  </n-card>
</template>

<script>
import { defineComponent, reactive } from 'vue';
import { BasicTable } from '@/components/Table';
import { getPageList } from '@/api/system/role';
export const columns = [
  {
    title: 'id',
    key: 'id',
  },
  {
    title: '角色名称',
    key: 'roleName',
  },
  {
    title: '角色编码',
    key: 'roleCode',
  },
  {
    title: '创建时间',
    key: 'createTime',
  },
];
export default defineComponent({
  components: { BasicTable },
  setup() {
    const params = reactive({
      roleName: '',
    });
    // 数据请求
    const loadDataTable = async (res) => {
      return await getPageList({...res }, params);
    };

    function onCheckedRow(rowKeys) {
      console.log(rowKeys);
    }
    return {
      columns,
      loadDataTable,
      onCheckedRow,
    };
  },
});
</script>
<style lang="less" scoped></style>

BasicTable Props

BasicTable基于NDataTable封装，其属性见：NDataTable.props

名称	类型	默认值	说明
NDataTable.props	-	-	原 UI 组件的 props
title	string	null	表格标题
titleTooltip	string	null	表格标题的弹出提示
size	'small'｜'medium'｜'large'	medium	表格尺寸
dataSource	Array<object>	[]	表格数据
columns	Array<object>	[]	表格列信息
beforeRequest	(page: number, pageSize: number) => Promise<any>	undefined	请求发起前数据处理
request	(page: number, pageSize: number) => Promise<any>	undefined	发起请求
beforeRequest	(page: number, pageSize: number) => Promise<any>	undefined	请求发起后数据处理
rowKey	string｜(record) => string	undefined	行的每一列key
pagination	object｜boolean	() => {}	分页信息
actionColumn	object	null	Action列，对表格行的操作
canResize	boolean	true	是否允许调整尺寸
resizeHeightOffset	number	0	重置高度

BasicTable Methods

方法的使用示例：@update:checked-row-keys="onCheckedRow"

名称	类型	说明
fetch-success	(items: array, resultTotal: number) => void	数据获取成功时触发函数
fetch-error	(error: string｜object)	数据获取失败时触发函数
update:checked-row-keys	(rowKeys) => void	行选中事件
edit-end	(record, index, key, value) => void	可修改单元格的数据提交事件触发函数
edit-cancel	(record, index, key, value) => void	可修改单元格的取消编辑事件触发函数
edit-row-end	() => void	该行每个可编辑单元格提交成功事件触发函数
edit-change	(colum: Array<object>, value: object, record) => void	可修改单元格的编辑状态改变事件触发函数

BasicTable Slots

名称	参数	说明
tableTitle	()	表格上方左区域的展示
toolbar	()	表格上方右区域的展示

Columns Options

BasicTable的props中的columns，其可选性如下表：

名称	类型	默认值	说明
edit	boolean	false	该列是否可编辑
editRow	boolean	false	只允许整行编辑操作，不能单独进入
editable	boolean	false	以编辑模式显示，即不需点击进入
editComponent	NInput｜NInputNumber｜NSelect｜NCheckbox｜NSwitch｜NDataPicker｜NTimePicker	NInput	可编辑时，编辑组件类型
editComponentProps	Recordable	undefined	编辑组件的属性，例如编辑组件为下拉菜单时，需要提供的options
editRule	boolean(text: string, record: Recordable) => Promise<string>	false	校验规则
editValueMap	(value: any) => string		自定义的value处理方法
onEditRow	() => void	undefined	编辑行
auth	Array<sting>	[]	权限编码控制是否显示
ifShow	boolean｜(column: BasicColumn) => boolean	true	业务控制是否显示
draggable	boolean	true	控制是否支持拖拽，默认支持

案例：

import { h } from 'vue';

export const columns = [
  {
    title: 'id',
    key: 'id',
    width: 100,
  },
  {
    title: '名称',
    key: 'name',
    editComponent: 'NInput',
    // 默认必填校验
    edit:true,
    editRule: true,
    editRow: true,
    width: 200,
    editable: true,
  },
  {
    title: '地址',
    key: 'address',
    editComponent: 'NSelect',
    editComponentProps: {
      options: [
        {
          label: '广东省',
          value: 1,
        },
        {
          label: '浙江省',
          value: 2,
        },
      ],
    },
    edit: true,
    width: 200,
    ellipsis: false,
  },
  {
    title: '开始日期',
    key: 'beginTime',
    edit: true,
    width: 160,
    editComponent: 'NDatePicker',
    editComponentProps: {
      type: 'datetime',
      format: 'yyyy-MM-dd HH:mm:ss',
      valueFormat: 'yyyy-MM-dd HH:mm:ss',
    },
    ellipsis: false,
  },
  {
    title: '结束日期',
    key: 'endTime',
    width: 160,
  },
];

Component Setting

export default {
  table: {
    apiSetting: {
      // 当前页的字段名
      pageField: 'page',
      // 每页数量字段名
      sizeField: 'pageSize',
      // 接口返回的数据字段名
      listField: 'records',
      // 接口返回总页数字段名
      totalField: 'pages',
    },
    //默认分页数量
    defaultPageSize: 10,
    //可切换每页数量集合
    pageSizes: [10, 20, 30, 40, 50],
  },
  upload: {
    //考虑接口规范不同
    apiSetting: {
      // 集合字段名
      infoField: 'data',
      // 图片地址字段名
      imgField: 'photo',
    },
    //最大上传图片大小
    maxSize: 2,
    //图片上传类型
    fileType: [
      'image/png',
      'image/jpg',
      'image/jpeg',
      'image/gif',
      'image/svg+xml',
    ],
  },
};

实现

组件的实现可以参考：AdminPro JS版搭建流程 | 组件使用 | BasicTable