组件介绍及使用

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部分的导航插槽 |