npm 包 @beisen-elearning/ux-p-man-plan-trainee 使用教程

阅读时长 5 分钟读完

概述

@beisen-elearning/ux-p-man-plan-trainee 是一个 Beisen E-learning 提供的用于人力资源管理的前端组件库。可以用于实现培训计划的创建、编辑、查询等功能。

安装

使用 npm 安装 @beisen-elearning/ux-p-man-plan-trainee

使用

引入组件

在需要使用的组件中引入 @beisen-elearning/ux-p-man-plan-trainee

TraineeTable

TraineeTable 是用于展示学员信息列表的表格组件。可以通过传递 props 来实现对表格的自定义设置。

props

  • dataSource:必选,用于传递数据源。格式如下:
-- -------------------- ---- -------
----- ---------- - -
  -
    --- ----
    ----- -----
    ------- ----
    ---- ---
    ----------- ------
    --------- -----
  --
  -
    --- ----
    ----- -----
    ------- ----
    ---- ---
    ----------- ------
    --------- -----
  -
-
  • loading:可选,用于设置表格加载状态。
  • pageSize:可选,用于设置每页显示数据量,默认为 10。
  • pageTotal:可选,用于设置总数据量,默认为数据源长度。
  • columns:可选,用于自定义表格列,其中 title 表示列名,dataIndex 表示对应数据源的 key。
-- -------------------- ---- -------
----- ------- - -
  -
    ------ -----
    ---------- -----------
  --
  -
    ------ -----
    ---------- ---------
  --
-

例子

TraineeModal

TraineeModal 是用于创建与编辑学员信息的弹窗组件。可以通过传递 props 来实现对弹窗的自定义设置。

props

  • visible:必选,用于设置弹窗是否可见。
  • onOk:必选,点击确认按钮时的回调函数。
  • onCancel:必选,点击取消按钮时的回调函数。
  • name:可选,用于设置学员姓名的初始值。
  • gender:可选,用于设置学员性别的初始值。
  • age:可选,用于设置学员年龄的初始值。
  • department:可选,用于设置学员所在部门的初始值。
  • position:可选,用于设置学员职位的初始值。

例子

-- -------------------- ---- -------
-------------
  ----------------------
  --------------------
  ----------------------------
  ------------------------
  ----------------------------
  ----------------------
  ------------------------------------
  --------------------------------
--

TraineeEditor

TraineeEditor 是用于编辑学员信息的表单组件。可以通过传递 props 来实现对表单的自定义设置。

props

  • onFinish:必选,点击保存按钮时的回调函数。
  • onCancel:必选,点击取消按钮时的回调函数。
  • initialValues:必选,用于设置表单的初始值。
  • layout:可选,用于设置表单的布局。支持 horizontalvertical 两种布局方式。默认为 horizontal
  • labelCol:可选,用于设置表单 label 区域的 栅格布局。
  • wrapperCol:可选,用于设置表单 input 区域的 栅格布局。
  • form:可选,使用 Form.useForm() 可以拿到对应的 form 实例。

例子

总结

本篇文章主要介绍了 @beisen-elearning/ux-p-man-plan-trainee npm 包的使用教程。通过阅读本文,您可以了解到该组件库的基本功能和用法,希望能够对您的开发工作有所帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/135792