element-pages

vue@2.*管理后台页面组件封装，依赖于element-ui二次封装；包括页面的顶部搜索、表格、分页。主要是用数据驱动的方式配置管理后台的基础页面。（对于自定义度较高的页面，不推荐使用）。

vue 项目安装element-pages

npm install element-pages

vue 项目下引入

注意：该组件依赖element-ui；基于element-ui@2.15.0版本开发 在 main.js 文件下 use;

import elementPages from "element-pages";
Vue.use(elementPages)

组件包更新到 npm

更新之前需要在package.json文件下更新版本号

npm publish

编写文档

*.md 文档编写语法参考

---

组件说明

• 组件包括四个组件，pages、page-search、page-table、pagination
• 其中pages集合了其他三个组件，包括page-search、page-table、pagination，每个组件可以单独使用;
• config 所需参数包含这三个组件内参数；（在同级下，并非包含数据）
• page-search中；配置searchInit后默认有响应事件会执行查询，notQuery=true关闭。
• 分页组件pagination事件默认响应config.query()方法，刷新表格数据

prop

• config 基本配置数据
• height 页面组件高度

config

参数	类型	是否必填	默认值	说明
column	array	是	[]	列数据；详细column
data	array	是	[]	渲染的数据
query	function	否	-	获取表格数据的方法
pagination	object	是	{}	分页数据；详细pagination
hidePage	boolean	否	false	是否隐藏分页组件
loading	boolean	否	false	表格加载状态
showSummary	boolean	否	false	是否需要底部汇总计算
events	object	否	{}	响应事件；详细events
search	array	否	[]	搜索框数据；详细search
searchInit	function	否	-	初始化 搜索的 json 数据
searchLabelWidth	string	否	-	搜索栏的 label-width 统一设置
rowClassName	boolean	否	false	是否开启行间隔颜色
expand	boolean	否	false	是否开启表格展开行插槽，使用方式见插槽expand
defaultSort	object	否	{}	默认排序方式{prop:'',order:'ascending 正序/descending 倒序'}

column 列

---

参数	类型	是否必填	默认值	说明
label	string	是	-	标题
prop	string/array	是	-	展示值的 key，开启 parent 时非必填prop
width	string	否	-	宽度
minWidth	string	否	-	最小宽度，会参与分配剩余宽度
fixed	boolean	否	false	固定列
mode	string	否	-	模式；可选值 icon、index、tag、function、image
icon	string	否	-	mode=icon 时，展示的 icon 类名
type	string/function(row)	否	-	mode=tag 时，展示的 tag 风格
fn	function(row)	否	-	mode=function 时，处理数据后再渲染
fit	string	否	cover	mode=image 时，图片的展示比例
imageWidth	string	否	-	mode=image 时，图片的宽度
imageHeight	string	否	-	mode=image 时，图片的高度
index	boolean	否	false	是否显示序号
selection	boolean	否	false	是否显示多选框
parent	boolean	否	false	是否增加二级数据
sortable	boolean	否	false	是否开启排序
column	array	否	-	二级的列； parent 开启时必填，参数同 column
sum	object	否	-	列汇总配置；详细sum
apearation	array	否	-	按钮数组；详细apearation
align	string	否	center	表格对齐方式，同 element-table
rowClass	string	否	-	单元格类名
html	boolean	否	false	是否用 v-html 渲染 prop 的值
showOverflowTooltip	boolean	否	false	当内容过长被隐藏时显示 tooltip

mode 展示的模式

• icon：展示的图标、icon=图标类名，目前仅支持 element-ui 内置 icon
• index：序号下标，不需要绑定 prop
• tag：el-tag 标签，type=string|function；tag 风格
• function：特殊的展示数据时，可用函数处理，fn=(row)=>{}
• image：展示图片，prop 的值可为 string/Array，可做图片列表；点击图片时，在按钮点击事件返回 type=image

prop

• prop - array 数组 拼接字符串显示，不会计算底部汇总

pagination 分页组件数据

---

• 会进行双向绑定，直接更改父级组件数据
• 更改页数时，会直接调用 pops.query 方法获取列表数据

参数	类型	是否必填	默认值	说明
pageIndex	number	是	-	页码
pageSize	number	是	-	页数
total	number	是	-	总数

apearation 按钮数组

---

参数	类型	是否必填	默认值	说明
label	string	是	true	按钮文字
type	string	否	text	按钮类型
color	string	否	primary	可选'primary','success','warning','danger','info',可直接传颜色值
size	string	否	small	尺寸
disabled	Boolean/function	否	false	按钮是否禁用
show	function	否	return true	按钮是否显示

sum 列汇总配置

---

• 需开启 showSummary = true

参数	类型	是否必填	默认值	说明
computed	boolean	否	false	是否汇总列,默认不汇总
title	string	否	-	不汇总，直接替换文本
unit	string	否	-	汇总后的单位
toFixed	number	否	0	汇总后保留的小数位数
isNaNTitle	string	否	-	计算失败展示的文本

events 分页组件数据

---

参数	类型	是否必填	默认值	说明
onChangePageSize	function	否	-	更改页数时回调方法

search 搜索模块配置

---

• mode 搜索框模式；可选值 ：
  • date ：日期选择（参数对了的 element-ui 的日期选择器，）；
  • input：输入框；
  • select：下拉选项；
  • checkbox：复选框；
  • button：按钮；
• value ：范围日期选择时，对应数组;checkbox：对应 boolean
• options ： {label:'',vlaue:''}
• 配置 searchInit 后默认有响应事件会执行查询，notQuery=true 关闭

参数	类型	是否必填	默认值	说明
mode	string	是	-	搜索框模式
labelWidth	string	否	-	label 宽度
label	string	否	-	搜索 label 文字
value	string/array	是	-	搜索的值
key	string	否	-	搜索框的 key，返回搜索对象的 key
notQuery	boolean	否	-	是否关闭组件查询事件
placeholder	string	否	-	输入框的占位符，按钮的文字；复选框的文字
size	string	否	mini	按钮的尺寸
type	string	否	-	mode=button 按钮的类型;=date 日期组件的类型（参考日期时间组件 type
defaultTime	string[]	否	-	默认时间,时分秒，范围选择时，传数组字符串
plain	boolean	否	false	按钮是否朴素按钮
icon	string	否	-	按钮的图标，参考 element-ui-icon
options	array	否	-	mode=select 时；下拉的选项
disabled	boolean	否	false	是否禁用
clearable	boolean	否	true	是否可清除
loading	boolean	否	false	mode=button 时，按钮加载状态
valueFormat	string	否	'yyyy-MM-dd'	日期的显示格式，'yyyy-MM-dd HH:mm:ss'
rangeSeparator	string	否	'-'	日期范围选择时，间隔符
placeholder	string	否	''	日期范围选择时，占位符
startPlaceholder	string	否	'开始日期'	日期范围选择时，开始占位符
endPlaceholder	string	否	'结束日期'	日期范围选择时，结束占位符
showPickerOptions	boolean	否	false	是否展示快捷选择日期方式
pickerOptions	object	否	前三个月快捷方式	快捷选择日期方式，参考 element-ui 的 picker-options
rangeSeparator	string	否	'-'	日期范围选择时，间隔符

slot

• page-search-before 具名插槽

  • 在搜索条件前加入额外的搜索；额外的搜索数据需求单独处理

• expand 具名插槽

  • 在表格组件开启折叠展开框，使用同官网展开行 type="expand"

@event 事件

---

• onSearch(item,data);顶部搜索事件（input 回车时触发，select 选择时，按钮点击时）

  • item：所触发事件的 item 数据
  • 搜索栏的数据对象 {key:value} 的形式返回

• onChangePageSize(size)；分页，改变每页数量事件

• onChangeCurrentPage(index)；分页，改变页码事件

• rowBtnClick(row,index,btnItem)；表格行按钮点击事件

  • row：每行的数据
  • index：按钮的下标
  • btnItem：按钮的 item 数据

• rowClick(row) 点击某一行时

• sortClick(column) 点击筛选时

方法

• doLayout(type);更新表格排版视图，用于表格排版错乱更新。可通过 ref 主动更新
  • type:0-延迟更新，1-nextTick 更新