概述
@beisen-elearning/ux-p-man-plan-trainee
是一个 Beisen E-learning 提供的用于人力资源管理的前端组件库。可以用于实现培训计划的创建、编辑、查询等功能。
安装
使用 npm 安装 @beisen-elearning/ux-p-man-plan-trainee
:
npm install @beisen-elearning/ux-p-man-plan-trainee
使用
引入组件
在需要使用的组件中引入 @beisen-elearning/ux-p-man-plan-trainee
:
import { TraineeTable, TraineeModal, TraineeEditor } from '@beisen-elearning/ux-p-man-plan-trainee'
TraineeTable
TraineeTable
是用于展示学员信息列表的表格组件。可以通过传递 props 来实现对表格的自定义设置。
props
dataSource
:必选,用于传递数据源。格式如下:
-- -------------------- ---- ------- ----- ---------- - - - --- ---- ----- ----- ------- ---- ---- --- ----------- ------ --------- ----- -- - --- ---- ----- ----- ------- ---- ---- --- ----------- ------ --------- ----- - -
loading
:可选,用于设置表格加载状态。pageSize
:可选,用于设置每页显示数据量,默认为 10。pageTotal
:可选,用于设置总数据量,默认为数据源长度。columns
:可选,用于自定义表格列,其中title
表示列名,dataIndex
表示对应数据源的 key。
-- -------------------- ---- ------- ----- ------- - - - ------ ----- ---------- ----------- -- - ------ ----- ---------- --------- -- -
例子
<TraineeTable dataSource={dataSource} columns={columns} pageSize={5} loading={false} />
TraineeModal
TraineeModal
是用于创建与编辑学员信息的弹窗组件。可以通过传递 props 来实现对弹窗的自定义设置。
props
visible
:必选,用于设置弹窗是否可见。onOk
:必选,点击确认按钮时的回调函数。onCancel
:必选,点击取消按钮时的回调函数。name
:可选,用于设置学员姓名的初始值。gender
:可选,用于设置学员性别的初始值。age
:可选,用于设置学员年龄的初始值。department
:可选,用于设置学员所在部门的初始值。position
:可选,用于设置学员职位的初始值。
例子
-- -------------------- ---- ------- ------------- ---------------------- -------------------- ---------------------------- ------------------------ ---------------------------- ---------------------- ------------------------------------ -------------------------------- --
TraineeEditor
TraineeEditor
是用于编辑学员信息的表单组件。可以通过传递 props 来实现对表单的自定义设置。
props
onFinish
:必选,点击保存按钮时的回调函数。onCancel
:必选,点击取消按钮时的回调函数。initialValues
:必选,用于设置表单的初始值。layout
:可选,用于设置表单的布局。支持horizontal
和vertical
两种布局方式。默认为horizontal
。labelCol
:可选,用于设置表单label
区域的 栅格布局。wrapperCol
:可选,用于设置表单input
区域的 栅格布局。form
:可选,使用Form.useForm()
可以拿到对应的 form 实例。
例子
<TraineeEditor onFinish={handleFormFinish} onCancel={handleFormCancel} initialValues={{ ...editorTrainee }} layout="horizontal" labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} />
总结
本篇文章主要介绍了 @beisen-elearning/ux-p-man-plan-trainee
npm 包的使用教程。通过阅读本文,您可以了解到该组件库的基本功能和用法,希望能够对您的开发工作有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/135792