2.0.28 • Published 9 months ago

@wooshiao/x-ui v2.0.28

Weekly downloads
-
License
-
Repository
-
Last release
9 months ago

组件介绍及使用

1. 表格

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

::: tip 示例

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

:::

XTable 属性:

属性类型描述
hideHeaderBoolean是否隐藏header部分(查询条件)
hideTitleBoolean是否隐藏title部分
dataArray表格数据源
optionsObject表格属性,同el-table表格属性
columnsArray\<TableColumns>表格例属性
paginationPaginationType分页属性
其他其他其他el-table属性

XTable插槽:

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

PaginationType属性包含:

属性类型描述
showBoolean是否隐藏分页
layoutString同el-pagination属性
totalNumber同el-pagination属性
current-pageNumber同el-pagination属性
page-sizeNumber同el-pagination属性
search-dataFunction接受参数page(页码),size(每页条数),flag(三个值:page,search,reset.分别表示点击分页调用,点击查询按钮调用,点击重置按钮调用)

其中 TableColumns属性包含:

属性类型描述
show()=>boolean表格例是否显示
typeString表格例显示类型 index序号、selection多选框、expand展开、action操作按钮 相对于原生el-table-column增加了一个action
widthstring同el-table-column属性
indexnumber | (() => number)同el-table-column属性
labelstring同el-table-column属性
propstring同el-table-column属性
slotstring插槽名称,自定义该列内容
min-widthstring同el-table-column属性
alignstring同el-table-column属性
fixedstring同el-table-column属性
selectable(row,index)=> boolean同el-table-column属性
reserve-selectionboolean同el-table-column属性
formatter(row,column,cellValue,index)=>any | VNode\<RendererNode,RendererElement,any>同el-table-column属性
listArray\<BtnOptions>type==='action' 按钮的数据
isTextbooleantype==='action'时,操作按钮是文本格式还是按钮格式

其中BtnOptions属性包含:

  • 注意:需要用到permission按钮权限,需要在localstorage缓存permissions信息。格式为Array\<string>
属性类型描述
labelstring按钮的文字信息
typestring按钮类型,同el-button type属性
permissionUndefined | Array\<string>权限字段 同v-permission
show(row,index)=> boolean是否显示按钮
disabled(row,index)=> boolean是否禁用按钮
click(row,index)=> void点击事件
sizestring按钮大小,同el-button size属性
plainboolean按钮镂空,同el-button plain属性
childrenArray\<BtnOptions>子按钮,有这个字段则说明该按钮是下拉按钮el-dropdown

2. 表单

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

::: tip 示例

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

:::

XForm表单属性:

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

其中Schema属性包含:

属性类型描述
propstring表单项对应的v-model属性,与model对象的key对应
typestring表单项类型: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富文本编辑器
labelstring表单项label属性
labelWidthstring | number表单项label宽度
rulesFormRules表单项校验规则
sizestring表单项大小
descriptionstring此属性为表单项描述信息,存在该属性会在label旁边加个 ? 展示提示信息
inputPropsInputProps表单项参数,同element-plus对应的相关属性,额外新增三个属性,list: 当type为下拉多选树形等选择器时的选项列表数据,propsAlias:当type为下拉多选树形等选择器时的属性别名,slot:插槽

3. XEditor代码编辑器

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

::: tip 示例

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

::: XEditor编辑器属性:

属性类型描述
v-modelString文本内容,双向绑定
readonlyBoolean是否只读
themeString主题
modeString语言高亮模式
widthString宽度
heightString高度

4. XTinymce富文本编辑器

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

::: tip 示例

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

:::

XTinymce富文本编辑器属性

属性类型描述
v-modelString文本内容,双向绑定
readonlyBoolean是否只读
pluginsString或Array插件(同Tinymce的plugins属性)
toolbarString或Array工具栏(同Tinymce的toolbar属性)
widthString宽度
heightString高度

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-modelArray\<File>文件列表
isButtonBoolean上传控件是否为按钮
textString上传文字
placeholderString上传提示信息
widthString图片宽度
heightString图片高度
sizeNumber文件大小单位b
downloadFunction模板下载函数
其他其他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-modelArray\<string>双向绑定的选中数据
treeDataArray\<object>树形数据源
treePropsObject同el-tree属性props
lazyBoolean同el-tree属性
loadFunction同el-tree属性
showCheckboxBoolean是否显示多选框

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

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

::: tip 示例

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

:::

XTransfer属性

属性类型描述
v-modelArray\<string>双向绑定的选中数据
treeDataArray\<object>树形数据源
treePropsObject同el-tree属性props
lazyBoolean同el-tree属性
loadFunction同el-tree属性
titleArray头部title,默认:'组织架构', '用户列表', '已选择项'
hideTreeBoolean是否隐藏树
listDataArray\<object>用户列表数据源
listPropsObject用户列表属性别名 默认:{label: 'name', value: 'id'}
multipleBoolean是否多选

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

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

::: tip 示例

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

:::

XTransferSelect属性

属性类型描述
v-modelArray\<string>双向绑定的选中数据
treeDataArray\<object>树形数据源
treePropsObject同el-tree属性props
lazyBoolean同el-tree属性
loadFunction同el-tree属性
titleArray头部title,默认:'组织架构', '用户列表', '已选择项'
hideTreeBoolean是否隐藏树
listDataArray\<object>用户列表数据源
listPropsObject用户列表属性别名 默认:{label: 'name', value: 'id'}
multipleBoolean是否多选

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属性

属性类型描述
routeRouteRecordRaw当前路由参数
menusArray\<object>菜单数据源
navinfoObject包含三个属性,title(系统标题)、logo(系统logo)、username(用户名)
@tohomeFunction(事件)首页事件
@logoutFunction(事件)退出登录事件

XTransferSelect插槽

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

9 months ago

2.0.26

10 months ago

2.0.27

10 months ago

2.0.24

11 months ago

2.0.25

10 months ago

2.0.22

11 months ago

2.0.23

11 months ago

2.0.21

11 months ago

2.0.19

11 months ago

2.0.20

11 months ago

2.0.15

11 months ago

2.0.16

11 months ago

2.0.17

11 months ago

2.0.18

11 months ago

2.0.13

11 months ago

2.0.14

11 months ago

2.0.11

11 months ago

2.0.12

11 months ago

2.0.10

11 months ago

2.0.5

11 months ago

2.0.4

11 months ago

2.0.7

11 months ago

2.0.6

11 months ago

2.0.9

11 months ago

2.0.8

11 months ago

1.0.0

11 months ago

0.3.10

11 months ago

2.0.3

11 months ago

2.0.2

11 months ago

2.0.1

11 months ago

2.0.0

11 months ago

0.2.11

12 months ago

0.2.10

1 year ago

0.2.9

1 year ago

0.2.8

1 year ago

0.2.7

1 year ago

0.2.6

1 year ago

0.2.5

2 years ago

0.1.10

2 years ago

0.1.11

2 years ago

0.2.1

2 years ago

0.2.3

2 years ago

0.2.2

2 years ago

0.2.4

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.9

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago