diff --git a/examples/views/docs/component/filter.md b/examples/views/docs/component/filter.md index a51a3b1..0ce0ab3 100644 --- a/examples/views/docs/component/filter.md +++ b/examples/views/docs/component/filter.md @@ -45,6 +45,88 @@ export default { ::: +## 自定义按钮 + +支持自定义按钮占位及按钮组件 + +::: snippet 配置`uncollapsedSpan`改变展开时操作区占位,默认值`24`;插槽`operation`自定义按钮内容; + +```html + + + + + + 查询 + 重置 + + {{ collapsed ? '展开' : '收起' }} + + + + + + + + +``` + +::: + +## 自定义数据项 + +支持自定义数据项,一般用于通过JSON Scheme较难配置出的,较复杂的局部组件 + +::: snippet 插槽名与数据项`key`相同 + +```html + + + + + + + + + + + +``` + +::: + ## 展示数量 默认展示数量为`3`个,可以通过配置而改变 @@ -82,4 +164,21 @@ export default { 参数|说明|类型|可选值|默认值 -|-|-|-|- +value | 值 | Object | - | {} list | JSON Scheme配置项列表 | Array | - | [] +labelWidth | 默认Label宽度 | String | 110px +size | 大小 | String | - | small +span | 占位 | Number | - | 24 +uncollapsedSpan | 展开时操作区占位 | Number | - | 24 +visibleNum | 折叠时可视项数量 | Number | - | 3 +loading | 加载状态 | Boolean | - | - +formProps | 默认el-form配置参数 | Object | - | {} +params | 自定义附加参数 | Object | - | - + +## Events 事件 + +事件名称|说明|回调参数 +-|-|- +input | 表单值变化 | model +search | 查询 | model +reset | 重置表单 | - \ No newline at end of file diff --git a/packages/filter/index.vue b/packages/filter/index.vue index 793aed8..34bbe74 100644 --- a/packages/filter/index.vue +++ b/packages/filter/index.vue @@ -1,10 +1,16 @@ - + + + + + + + 查询 重置 - + {{ collapsed ? '展开' : '收起' }} @@ -30,6 +36,10 @@ export default { type: Number, default: 6, }, + uncollapsedSpan: { + type: Number, + default: 24, + }, visibleNum: { type: Number, default: 3, @@ -57,12 +67,15 @@ export default { }, computed: { formattedList() { - return [...this.list, { key: '$operation', label: '', labelWidth: '0px', span: !this.collapsed ? 24 : undefined }]; + return [...this.list, { key: 'operation', label: '', labelWidth: '0px', span: !this.collapsed ? this.uncollapsedSpan : undefined }]; }, showCollapsed() { const { list, visibleNum } = this; return list.length > visibleNum; }, + slotKeys() { + return Object.keys(this.$scopedSlots); + }, }, methods: { // 渲染列表项class @@ -82,6 +95,10 @@ export default { this.model = {}; this.$emit('reset'); }, + // 折叠 + handleCollapse() { + this.collapsed = !this.collapsed; + }, }, }; diff --git a/packages/form/form-render.vue b/packages/form/form-render.vue index 860c556..90e05ce 100644 --- a/packages/form/form-render.vue +++ b/packages/form/form-render.vue @@ -17,7 +17,7 @@ {{ item.group.title || item.group }} - + > -- libgit2 0.21.0