@wooshiao/x-ui v0.2.8

组件介绍及使用

1. 表格

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

::: tip 示例

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

:::

XTable 属性：

XTable插槽:

PaginationType属性包含:

其中 TableColumns属性包含:

其中BtnOptions属性包含：

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

2. 表单

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

::: tip 示例

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

:::

XForm表单属性：

其中Schema属性包含:

3. XEditor代码编辑器

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

::: tip 示例

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

::: XEditor编辑器属性：

4. XTinymce富文本编辑器

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

::: tip 示例

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

:::

XTinymce富文本编辑器属性

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

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

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

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

::: tip 示例

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

:::

XTransfer属性

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

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

::: tip 示例

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

:::

XTransferSelect属性

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

XTransferSelect插槽