# 实用组件
以下提到的所有实用组件均在src/components/common
目录下存放,文件名称与组件名称一致。
# AppLayout/全局页面布局组件
AppLayout是一个布局组件,规定了菜单、头部的位置,在Eva中,所有的页面都会被AppLayout包裹起来。你可以修改此组件以达到您需要的自定义样式。
<TableLayout>
<el-form slot="search-form">
<!-- 搜索表单内容 -->
</el-form>
<div slot="space">
<!-- 搜索表单与表格之间的内容,通常啥也没有 -->
</div>
<template v-slot:table-wrap>
<!-- 表格与分页 -->
</template>
<!-- 新建/编辑 -->
</TableLayout>
2
3
4
5
6
7
8
9
10
11
12
# TableLayout/列表页面布局组件
TableLayout也是一个布局组件,为了能够更好统一列表页面的内容和样式,所有的列表页面均通过该组件进行布局。你可以修改此组件以达到您需要的自定义样式。
<TableLayout>
<el-form slot="search-form">
<!-- 搜索表单内容 -->
</el-form>
<div slot="space">
<!-- 搜索表单与表格之间的内容,通常啥也没有 -->
</div>
<template v-slot:table-wrap>
<!-- 表格与分页 -->
</template>
<!-- 新建/编辑 -->
</TableLayout>
2
3
4
5
6
7
8
9
10
11
12
参数说明
参数 | 说明 |
---|---|
with-breadcrumb | 是否包含面包屑 |
roles | 角色数组,满足其中一个表示列表存在访问权限 |
permissions | 权限数组,满足其中一个表示列表存在访问权限 |
slots
参数 | 说明 |
---|---|
default | 默认插槽,用于存放新建/编辑DOM和其它内容处理的DOM对象 |
search-form | 搜索表单 |
space | 搜索表单与表格之间的区域 |
table-wrap | 表格区域,包含分页都应在此处理 |
# Profile/视图访问控制
视图访问控制组件用于控制用户是否有权限访问视图。
<profile :roles="roles" :permissions="permissions">
满足权限后展示,否则展示无权限视图。
</profile>
2
3
参数说明
参数 | 说明 |
---|---|
roles | 角色数组,满足其中一个表示视图存在访问权限 |
permissions | 权限数组,满足其中一个表示视图存在访问权限 |
如果同时存在roles和permissions,表示必须满足其中一个role和其中一个permission。
# Pagination/分页器
分页器用于实现列表分页功能,基于element-ui实现。内置的分页器是为了使得网页所有的分页保持一致而存在。所以,您应该尽可能的使用它来完成分页。
<pagination
:pagination="tableData.pagination"
@size-change="handleSizeChange"
@current-change="handlePageChange"
></pagination>
2
3
4
5
参数说明
参数 | 说明 |
---|---|
pagination | 分页对象,来自BaseTable.vue组件,详见分页-删除-批量删除的实现 |
@size-change | 当页容量发生变化时触发 |
@current-change | 当页码发生变化时触发 |
# SearchFormCollapse/搜索表单收缩
如果你希望你的搜索表单可以进行收缩,那么此组件可以满足你的需求。
<SearchFormCollapse slot="search-form">
<el-form ref="searchForm">...</el-form>
</SearchFormCollapse>
2
3
注:原本放在el-form
上的slot属性需要移动至SearchFormCollapse
组件上。
# ColumnDetail/列详情
当某一个有限的空间要展示很多内容时,您可以采用此组件来完成,可提高用户体验。你可以在线上演示 (opens new window)/操作日志模块预览效果。
<ColumnDetail :content="content"/>
参数说明
参数 | 说明 |
---|---|
button-type | 按钮类型,详情参考Button组件 (opens new window) |
content | 全部内容 |
limit | 数字,默认为12,当超过该值时展示为查看按钮 |
analyse | Boolean,是否自动对内容进行分析,开启后将自动识别是否为JSON字符串(如果是则会格式化后展示)。默认为true |
allow-copy | 是否允许复制,默认为true |
# GlobalWindow/全局窗口
新建/编辑/详情等页面中的子页面,都应该使用全局窗口来完成,让使用体验保持高度一致。
<GlobalWindow
width="80%"
:title="XXX"
:visible.sync="visible"
>
</GlobalWindow>
2
3
4
5
6
参数说明
参数 | 说明 |
---|---|
width | 宽度,单位可以是px,也可以是% |
withFooter | 是否包含底部操作 |
confirmWorking | 确认按钮loading状态 |
title | 窗口标题 |
visible | 是否展示 |
# TreeSelect/树选择器
系统内置的岗位选择器、菜单选择器、部门选择器等都是通过树选择器来完成的,详情请查阅vue-treeselect组件 (opens new window)
# DepartmentSelect/部门选择器
注:定制了部门管理
模块后才有此组件
<DepartmentSelect placeholder="请选择上级部门" v-model="deptId" :inline="false"/>
参数说明
参数 | 说明 |
---|---|
value | 值,通常使用v-model 绑定 |
inline | Boolean,是否设置为行元素,默认为true |
append-to-body | 是否将下拉选项添加到body标签中 |
multiple | 是否可多选 |
placeholder | 未选中状态下的提示 |
clearable | Boolean,可否清空,默认false |
excludeId | 需要被排除选中的部门ID |
# PositionSelect/岗位选择器
注:定制了岗位管理
模块后才有此组件
<PositionSelect placeholder="请选择岗位" v-model="positionId" :inline="false"/>
参数说明
参数 | 说明 |
---|---|
value | 值,通常使用v-model 绑定 |
inline | Boolean,是否设置为行元素,默认为true |
append-to-body | 是否将下拉选项添加到body标签中 |
multiple | 是否可多选 |
placeholder | 未选中状态下的提示 |
clearable | Boolean,可否清空,默认false |
excludeId | 需要被排除选中的岗位ID |
# MenuSelect/菜单选择器
<MenuSelect placeholder="请选择菜单" v-model="menuId" :inline="false"/>
参数说明
参数 | 说明 |
---|---|
value | 值,通常使用v-model 绑定 |
inline | Boolean,是否设置为行元素,默认为true |
append-to-body | 是否将下拉选项添加到body标签中 |
placeholder | 未选中状态下的提示 |
clearable | Boolean,可否清空,默认false |
excludeId | 需要被排除选中的菜单ID |
# LocationSelect/地区选择器
注:定制了地区管理
模块后才有此组件
<LocationSelect
:province-id.sync="provinceId"
:city-id.sync="cityId"
:area-id.sync="areaId"
:level="3"
placeholder="请选择地区"
/>
2
3
4
5
6
7
参数说明
参数 | 说明 |
---|---|
province-id | 省ID,添加.sync 修复符可自动更新数据 |
city-id | 市ID,添加.sync 修复符可自动更新数据 |
area-id | 区ID,添加.sync 修复符可自动更新数据 |
level | 等级,1省,2市,3区,默认为区 |
clearable | 是否可清空 |
placeholder | 未选中状态下的提示 |
@change | 发生变化时触发 |
# Value/值加载
有时候你可能希望某一个值存在加载效果,那么你可以使用此组件来实现。你可以在线上演示 (opens new window)/服务监测模块预览效果。
<Value :data="data" prop="cpu.physicalCount"/>
参数说明
参数 | 说明 |
---|---|
data | 值归属对象 |
prop | 值属性 |
suffix | 后缀 |
handler | 值处理函数,接收参数value |
# Light/光球
光球用于表示紧急状态。你可以在线上演示 (opens new window)/实用组件模块预览效果。
<Light :warn="" :danger="" :mini=""/>
参数说明
参数 | 说明 |
---|---|
warn | Boolean,是否展示为警告 |
danger | Boolean,是否展示为紧急(或危险) |
mini | mini大小,宽高为12px,默认为16px |
当warn和danger同时为true时优先使用danger。