1.0.1 • Published 9 months ago
npm-pages v1.0.1
组件说明
- 集合了三个组件，包括
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) 点击筛选时