# x-ui

**Repository Path**: wooshiao/x-ui

## Basic Information

- **Project Name**: x-ui
- **Description**: 基于element-plus封装的ui组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-12-22
- **Last Updated**: 2025-09-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# 组件介绍及使用
## 1. 表格
包含查询条件、按钮、表格、分页组件

<div><img src="./src/assets/images/表格.jpg"></div>

::: tip 示例
```vue
<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

<div><img src="./src/assets/images/表单.jpg"></div>

::: tip 示例
```vue
<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封装的简单代码编辑器

<div><img src="./src/assets/images/代码.jpg"></div>


::: tip 示例
```vue
<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封装的简单代码编辑器

<div><img src="./src/assets/images/富文本.jpg"></div>

::: tip 示例
```vue
<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封装的文件上传组件
<div>
  <img src="./src/assets/images/文件上传1.jpg">
  <img src="./src/assets/images/文件上传2.jpg">
  <img src="./src/assets/images/文件上传3.jpg">
</div>

::: tip 示例
```vue
<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封装的树组件,严格模式,重写父子组件关联。
<div>
  <img src="./src/assets/images/树组件.jpg">
</div>

::: tip 示例
```vue
<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人员选择器组件-穿梭框
人员选择器组件 包含树形组织机构选择和人员穿梭框选择

<div>
  <img src="./src/assets/images/人员选择器.jpg">
</div>

::: tip 示例
```vue
<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
<div>
  <img src="./src/assets/images/人员选择器-复合1.jpg">
  <img src="./src/assets/images/人员选择器-复合2.jpg">
</div>

::: tip 示例
```vue
<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 组件，组成中后台框架组件。
<div>
  <img src="./src/assets/images/布局容器.jpg">
</div>

::: tip 示例
```vue
<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插槽

| 名称           | 描述         |
| ------------- |-------------|
| -       | 默认插槽,一般直接插入<router-view></router-view> |
| nav      | header部分的导航插槽  |