组件介绍及使用

1. 表格

包含查询条件、按钮、表格、分页组件

::: tip 示例

<XTable :data="dataList" :columns="columns" :options="options" :pagination="pagination">
</XTable>

:::

XTable 属性：

属性	类型	描述
hideHeader	Boolean	是否隐藏header部分（查询条件）
hideTitle	Boolean	是否隐藏title部分
data	Array	表格数据源
options	Object	表格属性，同el-table表格属性
columns	Array<TableColumns>	表格例属性
pagination	PaginationType	分页属性
其他	其他	其他el-table属性

XTable插槽:

名称	描述
header	头部插槽，查询条件表单
title	列表名称
top	表格右上方按钮插槽

PaginationType属性包含:

属性	类型	描述
show	Boolean	是否隐藏分页
layout	String	同el-pagination属性
total	Number	同el-pagination属性
current-page	Number	同el-pagination属性
page-size	Number	同el-pagination属性
search-data	Function	接受参数page(页码),size(每页条数),flag(三个值:page,search,reset.分别表示点击分页调用，点击查询按钮调用，点击重置按钮调用)

其中 TableColumns属性包含:

属性	类型	描述
show	()=>boolean	表格例是否显示
type	String	表格例显示类型 index序号、selection多选框、expand展开、action操作按钮相对于原生el-table-column增加了一个action
width	string	同el-table-column属性
index	number \| (() => number)	同el-table-column属性
label	string	同el-table-column属性
prop	string	同el-table-column属性
slot	string	插槽名称，自定义该列内容
min-width	string	同el-table-column属性
align	string	同el-table-column属性
fixed	string	同el-table-column属性
selectable	(row,index)=> boolean	同el-table-column属性
reserve-selection	boolean	同el-table-column属性
formatter	(row,column,cellValue,index)=>any \| VNode<RendererNode,RendererElement,any>	同el-table-column属性
list	Array<BtnOptions>	type==='action' 按钮的数据
isText	boolean	type==='action'时,操作按钮是文本格式还是按钮格式

其中BtnOptions属性包含：

注意：需要用到permission按钮权限,需要在localstorage缓存permissions信息。格式为Array<string>

属性	类型	描述
label	string	按钮的文字信息
type	string	按钮类型，同el-button type属性
permission	Undefined \| Array<string>	权限字段同v-permission
show	(row,index)=> boolean	是否显示按钮
disabled	(row,index)=> boolean	是否禁用按钮
click	(row,index)=> void	点击事件
size	string	按钮大小，同el-button size属性
plain	boolean	按钮镂空，同el-button plain属性
children	Array<BtnOptions>	子按钮，有这个字段则说明该按钮是下拉按钮el-dropdown

2. 表单

包含各种element-plus组件和部分自定义组件、确定取消按钮。表单自动添加placeholder 包含组件：详见Schema属性 type

::: tip 示例

<XForm
   :model="formData"
   :schema="schema"
   label-width="120px"
   @cancel="cancel"
   @confirm="confirm"
></XForm>

:::

XForm表单属性：

属性	类型	描述
schema	Array<Schema>	生成Form的布局结构数组,表单项数组
model	Object	表单数据对象
hideBtn	Boolean	是否隐藏表单确定取消按钮
cancel（事件）	() => void	点击取消按钮的事件
confirm（事件）	(data,callback) => void	点击确定按钮的事件,接受两个参数,data:表单数据源,callback:函数调用关闭loading
其他	其他	el-form其他属性

其中Schema属性包含:

属性	类型	描述
prop	string	表单项对应的v-model属性，与model对象的key对应
type	string	表单项类型：slot插槽、text文本框、textarea文本域、password密码框、number数字输入框、switch开关、radio单选、radio-button单选button、checkbox多选框、select下拉框、tree-select树形下拉框、transfer-select人员选择器、cascader级联选择器、date日期选择器、datetime日期时间选择器、time时间选择器、time-select时间选择、upload文件上传、editor代码编辑器、tinymce富文本编辑器
label	string	表单项label属性
labelWidth	string \| number	表单项label宽度
rules	FormRules	表单项校验规则
size	string	表单项大小
description	string	此属性为表单项描述信息，存在该属性会在label旁边加个？展示提示信息
inputProps	InputProps	表单项参数，同element-plus对应的相关属性，额外新增三个属性，list: 当type为下拉多选树形等选择器时的选项列表数据，propsAlias:当type为下拉多选树形等选择器时的属性别名，slot:插槽

3. XEditor代码编辑器

基于ace-builds封装的简单代码编辑器

::: tip 示例

<XEditor v-model="content" width="800px" height="400px"></XEditor>

::: XEditor编辑器属性：

属性	类型	描述
v-model	String	文本内容，双向绑定
readonly	Boolean	是否只读
theme	String	主题
mode	String	语言高亮模式
width	String	宽度
height	String	高度

4. XTinymce富文本编辑器

基于tinymce封装的简单代码编辑器

::: tip 示例

<XTinymce v-model="content" style="height: 400px"></XTinymce>

:::

XTinymce富文本编辑器属性

属性	类型	描述
v-model	String	文本内容，双向绑定
readonly	Boolean	是否只读
plugins	String或Array	插件(同Tinymce的plugins属性)
toolbar	String或Array	工具栏(同Tinymce的toolbar属性)
width	String	宽度
height	String	高度

5. XUpload文件上传

基于el-upload封装的文件上传组件

::: tip 示例

<XUpload
  v-model="filelist"
  accept=".doc,.docx,.ppt,.pptx,.xls,.xlsx,.pdf"
  placeholder="只能上传.doc,.docx,.ppt,.pptx,.xls,.xlsx,.pdf格式文件"
  :http-request="httpRequest"
></XUpload>

<script>

function httpRequest(options: any) {
	return new Promise(async (resolve, reject) => {
		
	});
}
</script>

:::

XUpload属性

属性	类型	描述
v-model	Array<File>	文件列表
isButton	Boolean	上传控件是否为按钮
text	String	上传文字
placeholder	String	上传提示信息
width	String	图片宽度
height	String	图片高度
size	Number	文件大小单位b
download	Function	模板下载函数
其他	其他	el-upload其他属性

6. XTree树组件

基于el-tree封装的树组件,严格模式,重写父子组件关联。

::: tip 示例

<XTree
  v-model="selectList"
  style="margin-bottom: 200px"
  :tree-data="treeData"
  :lazy="false"
  :show-checkbox="true"
  @node-click="nodeClick"
></XTree>

:::

XTree属性

属性	类型	描述
v-model	Array<string>	双向绑定的选中数据
treeData	Array<object>	树形数据源
treeProps	Object	同el-tree属性props
lazy	Boolean	同el-tree属性
load	Function	同el-tree属性
showCheckbox	Boolean	是否显示多选框

7. XTransfer人员选择器组件-穿梭框

人员选择器组件包含树形组织机构选择和人员穿梭框选择

::: tip 示例

<XTransfer
  v-model="dataList"
  :load="load"
  :list-data="userList"
  multiple
  @node-click="getUserList"
></XTransfer>

:::

XTransfer属性

属性	类型	描述
v-model	Array<string>	双向绑定的选中数据
treeData	Array<object>	树形数据源
treeProps	Object	同el-tree属性props
lazy	Boolean	同el-tree属性
load	Function	同el-tree属性
title	Array	头部title,默认:['组织架构', '用户列表', '已选择项']
hideTree	Boolean	是否隐藏树
listData	Array<object>	用户列表数据源
listProps	Object	用户列表属性别名默认:{label: 'name', value: 'id'}
multiple	Boolean	是否多选

7. XTransferSelect人员选择器-下拉框-复合组件

人员选择器-下拉框-复合组件是把人员选择器组件-穿梭框封装在下拉框里面的复合组件,方便接入el-form

::: tip 示例

<XTransferSelect
  v-model="dataList"
  :load="load"
  :list-data="userList"
  :multiple="true"
  @node-click="getUserList"
></XTransferSelect>

:::

XTransferSelect属性

属性	类型	描述
v-model	Array<string>	双向绑定的选中数据
treeData	Array<object>	树形数据源
treeProps	Object	同el-tree属性props
lazy	Boolean	同el-tree属性
load	Function	同el-tree属性
title	Array	头部title,默认:['组织架构', '用户列表', '已选择项']
hideTree	Boolean	是否隐藏树
listData	Array<object>	用户列表数据源
listProps	Object	用户列表属性别名默认:{label: 'name', value: 'id'}
multiple	Boolean	是否多选

7. XLayout布局组件

XLayout布局组件结合element-plus 中 el-container 和 el-menu 组件，组成中后台框架组件。

::: tip 示例

<XLayout 
  :route="$route" 
  :menus="menus" 
  :navinfo="navinfo"
  @tohome="tohome" 
  @logout="logout"
>
  <router-view></router-view>
</XLayout>

:::

XTransferSelect属性

属性	类型	描述
route	RouteRecordRaw	当前路由参数
menus	Array<object>	菜单数据源
navinfo	Object	包含三个属性,title(系统标题)、logo(系统logo)、username(用户名)
@tohome	Function(事件)	首页事件
@logout	Function(事件)	退出登录事件

XTransferSelect插槽

名称	描述
-	默认插槽,一般直接插入
nav	header部分的导航插槽

@wooshiao/x-ui

组件介绍及使用

1. 表格

XTable 属性：

XTable插槽:

PaginationType属性包含:

其中 TableColumns属性包含:

其中BtnOptions属性包含：

2. 表单

XForm表单属性：

其中Schema属性包含:

3. XEditor代码编辑器

4. XTinymce富文本编辑器

5. XUpload文件上传

6. XTree树组件

7. XTransfer人员选择器组件-穿梭框

7. XTransferSelect人员选择器-下拉框-复合组件

7. XLayout布局组件

Readme

Keywords

Package Sidebar

Install

Repository

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@wooshiao/x-ui

组件介绍及使用

1. 表格

XTable 属性：

XTable插槽:

PaginationType属性包含:

其中 TableColumns属性包含:

其中BtnOptions属性包含：

2. 表单

XForm表单属性：

其中Schema属性包含:

3. XEditor代码编辑器

4. XTinymce富文本编辑器

5. XUpload文件上传

6. XTree树组件

7. XTransfer人员选择器组件-穿梭框

7. XTransferSelect人员选择器-下拉框-复合组件

7. XLayout布局组件

Readme

Keywords

Package Sidebar

Install

Repository

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads