1.1.13 • Published 29 days ago
element-pages v1.1.13
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 | 是否开启行间隔颜色 |
defaultSort | object | 否 | {} | 默认排序方式{prop:'',order:'ascending正序/descending倒序'} |
column 列
参数 | 类型 | 是否必填 | 默认值 | 说明 |
---|---|---|---|---|
label | string | 是 | - | 标题 |
prop | string/array | 是 | - | 展示值的 key,开启 parent 时非必填prop |
width | 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 |
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 具名插槽
- 在搜索条件前加入额外的搜索;额外的搜索数据需求单独处理
@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) 点击筛选时
1.1.13
29 days ago
1.1.12
4 months ago
1.1.11
4 months ago
1.1.9
6 months ago
1.1.8
6 months ago
1.1.7
6 months ago
1.1.6
6 months ago
1.1.4
6 months ago
1.1.10
6 months ago
1.1.1
9 months ago
1.1.0
9 months ago
1.1.3
9 months ago
1.1.2
9 months ago
1.0.14
9 months ago
1.0.13
9 months ago
1.0.12
9 months ago
1.0.11
9 months ago
1.0.10
9 months ago
1.0.9
9 months ago
1.0.8
9 months ago
1.0.7
9 months ago
1.0.6
9 months ago
1.0.5
9 months ago
1.0.4
9 months ago
1.0.3
9 months ago
1.0.2
9 months ago