Commit cf0e2f1ad3af6b7d13f39cb2f1725ebc3a010fbc
1 parent
7d33dd27
Exists in
master
and in
1 other branch
feat: 优化展开项传值
Showing
4 changed files
with
33 additions
and
25 deletions
Show diff stats
packages/schema-filter/index.vue
| @@ -6,7 +6,7 @@ | @@ -6,7 +6,7 @@ | ||
| 6 | <el-button-group v-if="!slotKeys.includes('operation')" slot="operation" style="display: flex; justify-content: flex-end"> | 6 | <el-button-group v-if="!slotKeys.includes('operation')" slot="operation" style="display: flex; justify-content: flex-end"> |
| 7 | <el-button type="primary" @click="onSearch" :loading="loading" icon="el-icon-search">查询</el-button> | 7 | <el-button type="primary" @click="onSearch" :loading="loading" icon="el-icon-search">查询</el-button> |
| 8 | <el-button @click="onReset">重置</el-button> | 8 | <el-button @click="onReset">重置</el-button> |
| 9 | - <el-button v-if="showCollapsed" @click="onCollapse">{{ collapsed ? '收起' : '展开' }}</el-button> | 9 | + <el-button v-if="showCollapsed" @click="onCollapse">{{ isCollapsed ? '收起' : '展开' }}</el-button> |
| 10 | </el-button-group> | 10 | </el-button-group> |
| 11 | </z-schema-form> | 11 | </z-schema-form> |
| 12 | </template> | 12 | </template> |
| @@ -31,12 +31,13 @@ export default { | @@ -31,12 +31,13 @@ export default { | ||
| 31 | loading: Boolean, | 31 | loading: Boolean, |
| 32 | display: Number, | 32 | display: Number, |
| 33 | span: Number, | 33 | span: Number, |
| 34 | + collapsed: Boolean, | ||
| 34 | collapsedSpan: Number, | 35 | collapsedSpan: Number, |
| 35 | uncollapsedSpan: Number, | 36 | uncollapsedSpan: Number, |
| 36 | }, | 37 | }, |
| 37 | data() { | 38 | data() { |
| 38 | return { | 39 | return { |
| 39 | - collapsed: false, | 40 | + isCollapsed: this.collapsed, |
| 40 | model: this.value, | 41 | model: this.value, |
| 41 | originData: {}, | 42 | originData: {}, |
| 42 | }; | 43 | }; |
| @@ -48,6 +49,9 @@ export default { | @@ -48,6 +49,9 @@ export default { | ||
| 48 | model(val) { | 49 | model(val) { |
| 49 | this.$emit('input', val); | 50 | this.$emit('input', val); |
| 50 | }, | 51 | }, |
| 52 | + collapsed(val) { | ||
| 53 | + this.isCollapsed = val; | ||
| 54 | + }, | ||
| 51 | }, | 55 | }, |
| 52 | computed: { | 56 | computed: { |
| 53 | _display() { | 57 | _display() { |
| @@ -74,7 +78,7 @@ export default { | @@ -74,7 +78,7 @@ export default { | ||
| 74 | const result = []; | 78 | const result = []; |
| 75 | const visibleNumber = this._display - 1; | 79 | const visibleNumber = this._display - 1; |
| 76 | items.forEach((item, index) => { | 80 | items.forEach((item, index) => { |
| 77 | - if (!this.collapsed && index > visibleNumber && index < items.length) { | 81 | + if (!this.isCollapsed && index > visibleNumber && index < items.length) { |
| 78 | result.push({ ...item, if: true, show: false }); | 82 | result.push({ ...item, if: true, show: false }); |
| 79 | } else { | 83 | } else { |
| 80 | result.push({ ...item, if: true, show: true }); | 84 | result.push({ ...item, if: true, show: true }); |
| @@ -95,7 +99,7 @@ export default { | @@ -95,7 +99,7 @@ export default { | ||
| 95 | return this.formattedItems.length % this.rowItemCount; | 99 | return this.formattedItems.length % this.rowItemCount; |
| 96 | }, | 100 | }, |
| 97 | operationSpan() { | 101 | operationSpan() { |
| 98 | - if (this.collapsed) { | 102 | + if (this.isCollapsed) { |
| 99 | if (this._collapsedSpan) { | 103 | if (this._collapsedSpan) { |
| 100 | return this._collapsedSpan; | 104 | return this._collapsedSpan; |
| 101 | } | 105 | } |
| @@ -125,7 +129,7 @@ export default { | @@ -125,7 +129,7 @@ export default { | ||
| 125 | search: this.onSearch, | 129 | search: this.onSearch, |
| 126 | reset: this.onReset, | 130 | reset: this.onReset, |
| 127 | collapse: this.onCollapse, | 131 | collapse: this.onCollapse, |
| 128 | - collapsed: this.collapsed, | 132 | + collapsed: this.isCollapsed, |
| 129 | loading: this.loading, | 133 | loading: this.loading, |
| 130 | }; | 134 | }; |
| 131 | }, | 135 | }, |
| @@ -151,7 +155,8 @@ export default { | @@ -151,7 +155,8 @@ export default { | ||
| 151 | }, | 155 | }, |
| 152 | // 折叠 | 156 | // 折叠 |
| 153 | onCollapse() { | 157 | onCollapse() { |
| 154 | - this.collapsed = !this.collapsed; | 158 | + this.isCollapsed = !this.isCollapsed; |
| 159 | + this.$emit('update:collapsed', this.isCollapsed); | ||
| 155 | }, | 160 | }, |
| 156 | }, | 161 | }, |
| 157 | }; | 162 | }; |
packages/schema-page/index.vue
| @@ -9,12 +9,23 @@ | @@ -9,12 +9,23 @@ | ||
| 9 | <slot name="header" v-bind="_slotScope"></slot> | 9 | <slot name="header" v-bind="_slotScope"></slot> |
| 10 | </div> | 10 | </div> |
| 11 | <!-- 筛选组件 --> | 11 | <!-- 筛选组件 --> |
| 12 | - <div v-if="schema.filter" class="z-schema-page__filter"> | ||
| 13 | - <z-schema-filter :size="_size" :schema="schema.filter" :value="valueFilter" @input="e => $emit('update:value-filter', e)" :loading="tableLoading" @search="onSearch"> | ||
| 14 | - <template v-for="item in getSlotKeys('filter-')" #[item.name]="slotScope"> | ||
| 15 | - <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot> | ||
| 16 | - </template> | ||
| 17 | - </z-schema-filter> | 12 | + <div v-if="schema.filter !== false" class="z-schema-page__filter"> |
| 13 | + <slot name="filter" v-bind="_slotScope"> | ||
| 14 | + <z-schema-filter | ||
| 15 | + :size="_size" | ||
| 16 | + :schema="schema.filter" | ||
| 17 | + :value="valueFilter" | ||
| 18 | + @input="e => $emit('update:value-filter', e)" | ||
| 19 | + :loading="tableLoading" | ||
| 20 | + @search="onSearch" | ||
| 21 | + :collapsed="collapsed" | ||
| 22 | + @update:collapsed="e => $emit('update:collapsed', e)" | ||
| 23 | + > | ||
| 24 | + <template v-for="item in getSlotKeys('filter-')" #[item.name]="slotScope"> | ||
| 25 | + <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot> | ||
| 26 | + </template> | ||
| 27 | + </z-schema-filter> | ||
| 28 | + </slot> | ||
| 18 | </div> | 29 | </div> |
| 19 | <!-- 按钮区 --> | 30 | <!-- 按钮区 --> |
| 20 | <div v-if="schema.action !== false" class="z-schema-page__action"> | 31 | <div v-if="schema.action !== false" class="z-schema-page__action"> |
| @@ -182,7 +193,7 @@ setKeysDefault(['value-table'], { | @@ -182,7 +193,7 @@ setKeysDefault(['value-table'], { | ||
| 182 | }, | 193 | }, |
| 183 | }); | 194 | }); |
| 184 | setKeysDefault(['size', 'dialogTitle', 'dialogType'], String); | 195 | setKeysDefault(['size', 'dialogTitle', 'dialogType'], String); |
| 185 | -setKeysDefault(['dialogVisible', 'auto', 'loading'], Boolean); | 196 | +setKeysDefault(['dialogVisible', 'auto', 'loading', 'collapsed'], Boolean); |
| 186 | setKeysDefault(['api-search', 'api-submit', 'api-new', 'api-edit', 'api-get', 'api-detail', 'api-delete'], Function); | 197 | setKeysDefault(['api-search', 'api-submit', 'api-new', 'api-edit', 'api-get', 'api-detail', 'api-delete'], Function); |
| 187 | 198 | ||
| 188 | export default { | 199 | export default { |
| @@ -268,7 +279,7 @@ export default { | @@ -268,7 +279,7 @@ export default { | ||
| 268 | return this.size || get(this.schema, 'props.size') || (this.$ELEMENT || {}).size; | 279 | return this.size || get(this.schema, 'props.size') || (this.$ELEMENT || {}).size; |
| 269 | }, | 280 | }, |
| 270 | _slotScope() { | 281 | _slotScope() { |
| 271 | - const properties = ['selection', 'currentPage', 'pageSizes', 'pageSize', 'layout', 'total']; | 282 | + const properties = ['selection', 'currentPage', 'pageSizes', 'pageSize', 'layout', 'total', 'collapsed']; |
| 272 | const methods = [ | 283 | const methods = [ |
| 273 | 'search', | 284 | 'search', |
| 274 | 'onSearch', | 285 | 'onSearch', |
packages/table/editable.vue
| @@ -27,15 +27,7 @@ | @@ -27,15 +27,7 @@ | ||
| 27 | </style> | 27 | </style> |
| 28 | 28 | ||
| 29 | <template> | 29 | <template> |
| 30 | - <el-table | ||
| 31 | - :data="tableData | tableDataFilter" | ||
| 32 | - :size="tableSize" | ||
| 33 | - v-bind="bindProps" | ||
| 34 | - v-on="$listeners" | ||
| 35 | - @header-click="onHeaderClick" | ||
| 36 | - @cell-click="onCellClick" | ||
| 37 | - @cell-dblclick="onCellDblclick" | ||
| 38 | - > | 30 | + <el-table :data="tableData | tableDataFilter" :size="_elSize" v-bind="bindProps" v-on="$listeners" @header-click="onHeaderClick" @cell-click="onCellClick" @cell-dblclick="onCellDblclick"> |
| 39 | <slot name="left"></slot> | 31 | <slot name="left"></slot> |
| 40 | <template v-for="(item, index) in columns"> | 32 | <template v-for="(item, index) in columns"> |
| 41 | <el-table-column v-bind="item" :key="index"> | 33 | <el-table-column v-bind="item" :key="index"> |
packages/table/normal.vue
| 1 | <template> | 1 | <template> |
| 2 | - <el-table :data="tableData" :size="tableSize" v-bind="bindProps" v-on="$listeners"> | 2 | + <el-table :data="tableData" :size="_elSize" v-bind="bindProps" v-on="$listeners"> |
| 3 | <slot name="left"></slot> | 3 | <slot name="left"></slot> |
| 4 | <template v-for="(item, index) in columns"> | 4 | <template v-for="(item, index) in columns"> |
| 5 | <el-table-column v-bind="item" :key="index"> | 5 | <el-table-column v-bind="item" :key="index"> |
| @@ -74,7 +74,7 @@ export default { | @@ -74,7 +74,7 @@ export default { | ||
| 74 | _elFormItemSize() { | 74 | _elFormItemSize() { |
| 75 | return (this.elFormItem || {}).elFormItemSize; | 75 | return (this.elFormItem || {}).elFormItemSize; |
| 76 | }, | 76 | }, |
| 77 | - tableSize() { | 77 | + _elSize() { |
| 78 | return this.size || this._elFormItemSize || (this.elForm || {}).size || (this.$ELEMENT || {}).size; | 78 | return this.size || this._elFormItemSize || (this.elForm || {}).size || (this.$ELEMENT || {}).size; |
| 79 | }, | 79 | }, |
| 80 | bindProps() { | 80 | bindProps() { |