npm-pages
v1.0.1
Published
- 集合了三个组件,包括`page-search`、`page-table`、`pagination`; - `config` 所需参数包含这三个组件内参数;(在同级下,并非包含数据) - `page-search`中;配置`searchInit`后默认有响应事件会执行查询,`notQuery=true`关闭。 - 分页组件`pagination`事件默认响应`config.query()`方法,刷新表格数据
Downloads
1
Readme
组件说明
- 集合了三个组件,包括
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 | 是否开启行间隔颜色 |
column 列
prop - array 数组 拼接字符串显示,不会计算底部汇总
| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | ---------- | :------------------: | :------: | :----: | ------------------------------------------: | | label | string | 是 | - | 标题 | | prop | string/array | 是 | - | 展示值的 key,开启 parent 时非必填 | | width | string | 否 | - | 宽度 | | fixed | boolean | 否 | false | 固定列 | | mode | string | 否 | - | 模式;可选值 icon、index、tag、function | | icon | string | 否 | - | mode=icon 时,展示的 icon 类名 | | type | string/function(row) | 否 | - | mode=tag 时,展示的 tag 风格 | | fn | function(row) | 否 | - | mode=function 时,处理数据后再渲染 | | index | boolean | 否 | false | 是否显示序号 | | selection | boolean | 否 | false | 是否显示多选框 | | parent | boolean | 否 | false | 是否增加二级数据 | | column | array | 否 | - | 二级的列; parent 开启时必填,参数同 column | | sum | object | 否 | - | 列汇总配置;详细sum | | apearation | array | 否 | - | 按钮数组;详细apearation | | align | string | 否 | center | 表格对齐方式,同 element-table | | rowClass | string | 否 | - | 单元格类名 |
mode 展示的模式
- icon:展示的图标、icon=图标类名,目前仅支持 element-ui 内置 icon
- index:序号下标,不需要绑定 prop
- tag:el-tag 标签,type=string|function;tag 风格
- function:特殊的展示数据时,可用函数处理,fn=(row)=>{}
pagination 分页组件数据
- 会进行双向绑定,直接更改父级组件数据
- 更改页数时,会直接调用 pops.query 方法获取列表数据
| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | --------- | :----: | :------: | :----: | ---: | | pageIndex | number | 是 | - | 页码 | | pageSize | number | 是 | - | 页数 | | total | number | 是 | - | 总数 |
apearation 按钮数组
| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | -------- | :--------------: | :------: | :---------: | -----------: | | label | string | 是 | true | 按钮文字 | | type | string | 否 | text | 按钮类型 | | size | string | 否 | small | 尺寸 | | disabled | Boolean/function | 否 | false | 按钮是否禁用 | | show | function | 否 | return true | 按钮是否显示 |
sum 列汇总配置
- 需开启 showSummary = true
| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | ----------- | :-----: | :------: | :----: | -------------------: | | notComputed | boolean | 否 | true | 是否汇总列 | | title | string | 否 | - | 不汇总,直接替换文本 | | unit | string | 否 | - | 汇总后的单位 | | toFixed | number | 否 | 0 | 汇总后保留的小数位数 | | isNaNTitle | string | 否 | - | 计算失败展示的文本 |
events 分页组件数据
| 参数 | 类型 | 是否必填 | 默认值 | 说明 | | ---------------- | :------: | :------: | :----: | -----------------: | | onChangePageSize | function | 否 | - | 更改页数时回调方法 |
search 搜索模块配置
- mode 搜索框模式;可选值 :
- daterange :日期范围选择;
- monthrange :月份范围选择;
- 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 | 否 | - | 按钮的类型 | | options | array | 否 | - | mode=select 时;下拉的选项 | | loading | boolean | 否 | false | mode=button 时,按钮加载状态 |
slot
- page-search-before 具名插槽
- 在搜索条件前加入额外的搜索;额外的搜索数据需求单独处理
@event 搜索栏事件
onSearch(item,data);事件
- item:所触发事件的 item 数据
- 搜索栏的数据对象 {key:value} 的形式返回
onChangePageSize(size);改变每页数量事件
onChangeCurrentPage(index);改变页码事件
rowBtnClick(row,index,btnItem);表格行按钮点击事件
- row:每行的数据
- index:按钮的下标
- btnItem:按钮的 item 数据
rowClick(row) 点击某一行时
sortClick(column) 点击筛选时