filter-page-table.md 2.8 KB
filter-page-table.vue
prop
| 参数 | 类型 | 默认值 | 是否必填 | 说明 |
|---|---|---|---|---|
| fields | Array | - |
是 | 字段列表(下文会说明如何使用) |
| data | Array | - |
是 | 数据列表 |
| opera | Array | [ ] | 否 | 操作列的列表(下文会说明如何使用) |
| toFormat | Function | - |
否 | 如果fields中的format不是function类型,则会走toFormat的方法,需要自己写过滤规则,多个的情况需要区分 |
| select | Boolean | false | 否 | 需要选择就变成true |
| total | NUmber | 0 | 否 | 分页的总数据 |
| usePage | Boolean | true | 否 | 是否使用分页 |
| options | Object | null | 否 | 加些属性,不知道能加啥,反正我把合计加上好使了 |
| useSum | Boolean | false | 否 | 使用合计 |
| sumcol | Array | [] |
否 | 计算哪一列,就把哪一列的prop写进去 |
| sumres | String | total |
否 | 处理每列结果的要求,默认计算总和(total),平均值(avg),最大值(max),最小值(min) |
| filter | Array | [] |
否 | 额外查询 |
| operaWidth | Number | 200 | 否 | 操作栏宽度 |
fields
参数 类型 默认值 是否必填 说明 label String -是 列名称 prop String -是 字段名称 format Function/String -否 Function类型:数据需要过滤则将过滤方法写在这;String类型:走toFormat方法,参数位(model=>字段名,value=>值) custom Boolean false 否 自定义输出 options Object -否 添加额外属性,比如说样式之类的 filter String -否 如果填写,则这个字段会查询,这里只填写类型,input/select,select的选项在options插槽中使用 selected Array -false 多选选项的数据 showTip Boolean false 否 是否使用tooltip显示过长内容 filterReturn Boolean -否 针对这个选项需要在选择后就做些逻辑处理时,改成true,然后再使用filterReturn方法处理,(例如二级联动的情况) notable Boolean false/undefined 否 不需要在表格中显示 selected Array -false 多选选项的数据 opera
参数 类型 默认值 是否必填 说明 label String -是 操作按钮提示文字 icon String -否 图标 method String -是 此按钮连接的父级方法($emit) confirm Boolean -否 是否需要确认提示 methodZh String/Function label 否 确认提示的操作文字,1,Function参数为这条数据,自己随意组合;2,String为纯自定义字符串,需要自己写整个提示语;3,默认,使用label字段提示 display Function -否 控制按钮是否显示(目前为简单版,只是根据此条数据中的内容判断,以后要是有需求会修改成toFormat的形式) methods
方法名 参数 说明 handleSelect Array[object] 返回选择的内容 query {skip,limit,...info} 分页查询,及条件查询 filterReturn {data,prop} 查询条件栏过滤条件中filterReturn字段为true的回调方法