# 🇨🇳实用组件

以下提到的所有实用组件除部分组件外其余均在src/components/common目录下存放，文件名称与组件名称一致。

# AppLayout/全局页面布局组件

AppLayout是一个布局组件，规定了菜单、头部的位置，在Eva中，所有的页面都会被AppLayout包裹起来。你可以修改此组件以达到您需要的自定义样式。

<el-container class="app-layout">
    <el-aside :class="{ collapse: menuData.collapse }">
      <!-- 菜单 -->
      <Menu/>
    </el-aside>
    <el-main>
      <!-- 头部 -->
      <header>
        <AppHeader/>
      </header>
      <main>
        <!-- 内容 -->
        <transition name="fade">
          <router-view></router-view>
        </transition>
      </main>
    </el-main>
  </el-container>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# TableLayout/列表页面布局组件

TableLayout也是一个布局组件，为了能够更好统一列表页面的内容和样式，所有的列表页面均通过该组件进行布局。你可以修改此组件以达到您需要的自定义样式。

<TableLayout>
  <template #search-form>
    <!-- 搜索表单内容 -->
  </template>
  <template #space>
    <!-- 搜索表单与表格之间的内容，通常啥也没有 -->
  </template>
  <template #table-wrap>
    <!-- 表格与分页 -->
  </template>
  <!-- 新建/编辑 -->
</TableLayout>

1
2
3
4
5
6
7
8
9
10
11
12

参数说明

参数	说明
authorized	是否已授权访问
fullscreen	是否全屏

slots

参数	说明
default	默认插槽，用于存放新建/编辑DOM和其它内容处理的DOM对象
search-form	搜索表单
space	搜索表单与表格之间的区域
table-wrap	表格区域，包含分页都应在此处理

# AttachUploader/文件上传

<AttachUploader v-model="value"/>

参数说明

参数	说明
accept	接受上传的文件类型，同el-uploader accept
iconClass	图标，默认'iconfont icon-file1'
modelValue	文件的fileKey
filename	文件名称，默认'文件已上传'

# AvatarUploader/头像上传

<AvatarUploader v-model="value"/>

参数说明

参数	说明
modelValue	头像的fileKey

# DictCheckboxGroup/字典复选框

<DictCheckboxGroup code="CODE" v-model="value"

参数说明

参数	说明
code	字典编码
disabled	是否禁用，默认为false

# DictRadioGroup/字典单选框

<DictRadioGroup code="CODE" v-model="value"/>

参数说明

参数	说明
code	字典编码
disabled	是否禁用，默认为false

# DictSelect/字典下拉框

<DictSelect code="CODE" v-model="value"/>

参数说明

参数	说明
code	字典编码
disabled	是否禁用，默认为false
placeholder	未选中状态下的提示
inline	是否设置为行元素，默认为true
multiple	是否可多选，默认为false
clearable	可否清空，默认false

# EmptyTip/无内容提示

<EmptyTip description="这里空空如也"/>

参数说明

参数	说明
imageSize	同el-empty image-size，默认55
description	同el-empty description，默认'暂无数据'

插槽

slot名称	说明
default	可用于实现自定义内容，如添加按钮等

# FormItemTip/提示文本

<FormItemTip>权限标识符为全局唯一的字符串</FormItemTip>

参数说明

参数	说明
withIcon	是否包含图标，默认为true
color	字体颜色，默认'#a0721e'
iconClass	图标class，默认'Warning'

插槽

slot名称	说明
default	图标后的内容
icon	如有特殊图标（如svg），可采用该插槽处理

# GlobalWindow/全局窗口

新建/编辑/详情等页面中的子页面，都应该使用全局窗口来完成，让使用体验保持高度一致。

<GlobalWindow
  width="80%"
  :title="XXX"
  v-model:visible="visible"
>
</GlobalWindow>

1
2
3
4
5
6

参数说明

参数	说明
width	宽度，单位可以是px，也可以是%
withFooter	是否包含底部操作
confirmWorking	确认按钮loading状态
confirmText	确认按钮文案
cancelText	取消按钮文案
title	窗口标题
visible	是否展示
closeOnPressEscape	按ESC是否关闭
wrapperClosable	点击遮罩层是否关闭

# Icon/图标

<!-- 使用对象 -->
<Icon :data="{ accessType: 'CLASS', className: 'el-icon-refresh' }"/>

<!-- 使用网络路径 -->
<Icon icon-uri="http://www.baidu.com/images/logo.png"/>

<!-- 使用CLASS（可自动识别element plus图标） -->
<Icon icon-class="Warning"/>

1
2
3
4
5
6
7
8

参数说明

参数	说明
data	Object类型，CLASS图标格式为：{ accessType: 'CLASS', className: 'el-icon-refresh' }；网络图标格式为： { accessType: 'URI', iconUri: '/images/icon.png' }
iconClass	图标class
iconUri	图标网络路径
size	尺寸，默认为'inherit'

# IconSelect/图标选择器

<IconSelect v-model="iconId"/>

参数说明

参数	说明
clearable	是否可清除，默认为true

# ImportButton/导入按钮

转为导入制作的组件，点击导入按钮后，自动弹出导入窗口，并根据参数自动完成导入和下载模版功能。

<ImportButton
  text="导入部门"
  template-name="部门.xlsx"
  template-path="/template/department.xlsx"
  action="/system/department/import"
  @success="search"
/>

1
2
3
4
5
6
7

参数说明

参数	说明
title	导入窗口标题
templatePath	模版地址，如模版文件存放为“后端工程/files/t.xlsx"，则路径为"t.xlsx"
templateName	下载后的模版文件名称
action	导入接口地址

# Light/光球

光球用于表示数据的紧急状态。

<!-- 正常状态灯 -->
<Light />

<!-- 警告状态灯 -->
<Light type="warning"/>

<!-- 危险状态灯 -->
<Light type="danger"/>

1
2
3
4
5
6
7
8

参数说明

参数	说明
type	默认“default”，可选"warning"和"danger"
size	可选small、default、large

# Loading/加载效果

<DataLoading icon-size="30px">
  加载中
</DataLoading>

1
2
3

参数说明

参数	说明
icon-size	加载中图标尺寸，默认20px

# MenuSelect/菜单选择器

<MenuSelect placeholder="请选择菜单" v-model="menuId" :inline="false"/>

参数说明

参数	说明
inline	Boolean，是否设置为行元素，默认为true
append-to-body	是否将下拉选项添加到body标签中
placeholder	未选中状态下的提示
clearable	Boolean，可否清空，默认false
excludeId	需要被排除选中的菜单ID

# Pagination/分页器

分页器用于实现列表分页功能，基于element-ui实现。内置的分页器是为了使得网页所有的分页保持一致而存在。所以，您应该尽可能的使用它来完成分页。

<pagination
  :pagination="tableData.pagination"
  @size-change="handleSizeChange"
  @current-change="handlePageChange"
>
</pagination>

1
2
3
4
5
6

参数说明

参数	说明
pagination	分页对象，来自BaseTable.vue组件，详见分页-删除-批量删除的实现
@size-change	当页容量发生变化时触发
@current-change	当页码发生变化时触发

# PasswordInput/密码输入框

部门属性仅chrome内核和safari支持

通常密码框浏览器会自动装载密码，提交时会提示记住密码。但对于始终都不允许自动填充的密码框，例如2FA认证的密码，这就需要对密码框做进一步处理。这就是PasswordInput的作用。

<PasswordInput v-model="password"/>

参数说明

参数	说明
withShowPassword	是否允许显示密码操作，默认为true
withoutAutoFill	不自动填充，仅chrome内核和safari支持，默认为true
maxlength	最大长度

# PopoverCellValue/长文本展示

当某一个有限的空间要展示很多内容时，您可以采用此组件来完成，可提高用户体验。你可以在线上演示 (opens new window)/操作日志模块预览效果。

<PopoverCellValue :content="content"/>

参数说明

参数	说明
content	内容
trigger	触发方式，同el-popover trigger
lineClamp	展示行数限制，默认为2
analyse	Boolean，是否自动对内容进行分析，开启后将自动识别是否为JSON字符串（如果是则会格式化后展示）。默认为true
withOpera	是否包含操作按钮

# RichEditor/富文本编辑器

<RichEditor
 v-model="content"
 height="500px"
 :editor-config="editorConfig"
/>

1
2
3
4
5

参数说明

参数	说明
height	编辑器高度，默认为null
placeholder	输入提示文案，默认为：'请输入'
mode	编辑器模式，默认为：'simple'
toolbarConfig	工具栏配置，详见https://www.wangeditor.com/v5/toolbar-config.html#toolbarkeys，默认为{}
editorConfig	编辑器配置，默认为{}

# Scrollbar/滚动条

<Scrollbar>
  <el-menu></el-menu>
</Scrollbar>

1
2
3

<SearchForm
  ref="searchForm"
  :model="searchForm"
  label-width="80px"
>
  <el-form-item label="手机尾号" prop="mobile"></el-form-item>
  <!-- 表单按钮 -->
  <template #buttons>
    <el-button>搜索</el-button>
  </template>
</SearchForm>

1
2
3
4
5
6
7
8
9
10
11

参数说明

参数	说明
model	表单数据对象
labelWidth	字段长度
collapse	是否需要展开/收起，默认为false
buttonWidth	按钮占据的宽度

slots

参数	说明
buttons	表单按钮

# SearchTable/表格


<SearchTable
  v-loading="isWorking.search"
  :data="tableData.list"
  :default-sort="{ prop: 'createdAt', order: 'descending' }"
  :fullscreen.sync="fullscreen"
  buttons-width="310px"
>
  <template #toolbar>
    <!-- 工具栏 -->
  </template>
  <!-- 表格 -->
  <el-table-column></el-table-column>
  <template #buttons>
    <!-- 表格行操作 -->
  </template>
</SearchTable>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

参数说明

参数	说明
data	同el-table data
defaultSort	同el-table default-sort
defaultExpandAll	同el-table default-expand-all
rowKey	同el-table row-key
showOverflowTooltip	同el-table show-overflow-tooltip，默认为false
tooltipEffect	同el-table tooltip-effect
rowClassName	同el-table row-class-name
digestType	同el-alert type
fullscreen	全屏标识，默认为false
digest	摘要信息，默认为false
withRefresh	是否包含刷新，默认为true
withDensity	是否包含密度，默认为true
withFullscreen	是否包含全屏，默认为true
buttonsWidth	按钮占据的宽度，默认为150px

slots

参数	说明
default	默认插槽，用于存放表格
toolbar	工具栏
digest	摘要内容
buttons	行操作按钮

# TagCellValue/单元格标签

<TagCellValue :data="row.roles" label-key="name"/>

参数说明

参数	说明
data	Array，数据
labelKey	标签key，将采用指定字段读取对象中的数据
tagStyle	标签样式处理器，默认为() => { return { background: '#f5f7fa', color: '#555' } }

# TreeSelect/树选择器

系统内置的岗位选择器、菜单选择器、部门选择器等都是通过树选择器来完成的，详情请查阅vue-treeselect组件 (opens new window)

# TwoFAWindow/2FA认证窗口

<TwoFAWindow ref="twoFAWindow"></TwoFAWindow>

参数说明

参数	说明
title	标题，默认'安全验证'
message	更多消息内容
confirmText	确认按钮文案
cancelText	取消按钮文案
width	宽度，默认480px

方法说明

方法名称	说明
open	打开窗口
confirm	确定
cancel	取消
close	关闭窗口

# Value/值加载

有时候你可能希望某一个值存在加载效果，那么你可以使用此组件来实现。

<template>
  <Value :data="data" prop="cpu.physicalCount"/>
</template>

<script>
export default {
  data() {
    return {
      data: {
        cpu: {
          // 默认值一定为null值才会出现loading效果
          physicalCount: null
        }
      }
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

参数说明

参数	说明
data	值归属对象
prop	值属性
icon-size	加载中图标尺寸，默认20px
prefix	前缀
suffix	后缀
handler	值处理函数，接收参数value

# NotAllow/不允许访问

用于访问不允许访问的页面时做提示

<NotAllowed>
  自定义内容，无自定义内容时采用默认内容展示
</NotAllowed>

1
2
3

# Profile/视图访问控制

视图访问控制组件用于控制用户是否有权限访问视图。

<Profile :authorized="authorized">
  满足权限后展示，否则展示无权限视图。
</Profile>

1
2
3

参数说明

参数	说明
authorized	是否已授权访问

# DepartmentSelect/部门选择器

注：定制了部门管理模块后才有此组件

<DepartmentSelect
 placeholder="请选择上级部门"
 v-model="deptId"
 :inline="false"
/>

1
2
3
4
5

参数说明

参数	说明
inline	Boolean，是否设置为行元素，默认为true
append-to-body	是否将下拉选项添加到body标签中
multiple	是否可多选
placeholder	未选中状态下的提示
clearable	Boolean，可否清空，默认false
excludeId	需要被排除选中的部门ID

← 🇨🇳前端手册项目部署 →

# 🇨🇳实用组件

# AppLayout/全局页面布局组件

# TableLayout/列表页面布局组件

# AttachUploader/文件上传

# AvatarUploader/头像上传

# DictCheckboxGroup/字典复选框

# DictRadioGroup/字典单选框

# DictSelect/字典下拉框

# EmptyTip/无内容提示

# FormItemTip/提示文本

# GlobalWindow/全局窗口

# Icon/图标

# IconSelect/图标选择器

# ImportButton/导入按钮

# Light/光球

# Loading/加载效果

# MenuSelect/菜单选择器

# Pagination/分页器

# PasswordInput/密码输入框

# PopoverCellValue/长文本展示

# RichEditor/富文本编辑器

# Scrollbar/滚动条

# SearchForm/搜索表单

# SearchTable/表格

# TagCellValue/单元格标签

# TreeSelect/树选择器

# TwoFAWindow/2FA认证窗口

# Value/值加载

# NotAllow/不允许访问

# Profile/视图访问控制

# DepartmentSelect/部门选择器