# 🇨🇳实用组件

以下提到的所有实用组件除部分组件外其余均在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"/>
1

参数说明

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

# AvatarUploader/头像上传

<AvatarUploader v-model="value"/>
1

参数说明

参数 说明
modelValue 头像的fileKey

# DictCheckboxGroup/字典复选框

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

参数说明

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

# DictRadioGroup/字典单选框

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

参数说明

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

# DictSelect/字典下拉框

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

参数说明

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

# EmptyTip/无内容提示

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

参数说明

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

插槽

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

# FormItemTip/提示文本

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

参数说明

参数 说明
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"/>
1

参数说明

参数 说明
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 placeholder="请选择菜单" v-model="menuId" :inline="false"/>
1

参数说明

参数 说明
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"/>
1

参数说明

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

# PopoverCellValue/长文本展示

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

<PopoverCellValue :content="content"/>
1

参数说明

参数 说明
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/搜索表单

<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"/>
1

参数说明

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

# TreeSelect/树选择器

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

# TwoFAWindow/2FA认证窗口

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

参数说明

参数 说明
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