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

鲁烨
2023-12-01


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

项目地址: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集成了很多功能,如下:

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

开始

本节会帮你快速了解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
titlestringnull表格标题
titleTooltipstringnull表格标题的弹出提示
size'small'|'medium'|'large'medium表格尺寸
dataSourceArray<object>[]表格数据
columnsArray<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请求发起后数据处理
rowKeystring|(record) => stringundefined行的每一列key
paginationobject|boolean() => {}分页信息
actionColumnobjectnullAction列,对表格行的操作
canResizebooleantrue是否允许调整尺寸
resizeHeightOffsetnumber0重置高度

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,其可选性如下表:

名称类型默认值说明
editbooleanfalse该列是否可编辑
editRowbooleanfalse只允许整行编辑操作,不能单独进入
editablebooleanfalse以编辑模式显示,即不需点击进入
editComponentNInput|NInputNumber|NSelect|NCheckbox|NSwitch|NDataPicker|NTimePickerNInput可编辑时,编辑组件类型
editComponentPropsRecordableundefined编辑组件的属性,例如编辑组件为下拉菜单时,需要提供的options
editRuleboolean(text: string, record: Recordable) => Promise<string>false校验规则
editValueMap(value: any) => string自定义的value处理方法
onEditRow() => voidundefined编辑行
authArray<sting>[]权限编码控制是否显示
ifShowboolean|(column: BasicColumn) => booleantrue业务控制是否显示
draggablebooleantrue控制是否支持拖拽,默认支持

案例:

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

 类似资料: