Loading

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

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
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 对应单元格值枚举
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

posted @ 2023-03-10 19:36  sw-code  阅读(946)  评论(0编辑  收藏  举报