Naive UI Admin后台管理系统的组件BasicTable使用指南-Toy模板网

这篇具有很好参考价值的文章主要介绍了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',
    ],
  },
};