frontend / zee

Download as
Browse Code »

Commit cf0e2f1ad3af6b7d13f39cb2f1725ebc3a010fbc

Authored by liuhanchen
1 parent 7d33dd27
Exists in master and in 1 other branch Feature-渲染优化

feat: 优化展开项传值

Showing 4 changed files with 33 additions and 25 deletions   Show diff stats
packages/schema-filter/index.vue
  Diff comments   View file @cf0e2f1
... ... @@ -6,7 +6,7 @@
6 6 <el-button-group v-if="!slotKeys.includes('operation')" slot="operation" style="display: flex; justify-content: flex-end">
7 7 <el-button type="primary" @click="onSearch" :loading="loading" icon="el-icon-search">查询</el-button>
8 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 10 </el-button-group>
11 11 </z-schema-form>
12 12 </template>
... ... @@ -31,12 +31,13 @@ export default {
31 31 loading: Boolean,
32 32 display: Number,
33 33 span: Number,
  34 + collapsed: Boolean,
34 35 collapsedSpan: Number,
35 36 uncollapsedSpan: Number,
36 37 },
37 38 data() {
38 39 return {
39   - collapsed: false,
  40 + isCollapsed: this.collapsed,
40 41 model: this.value,
41 42 originData: {},
42 43 };
... ... @@ -48,6 +49,9 @@ export default {
48 49 model(val) {
49 50 this.$emit('input', val);
50 51 },
  52 + collapsed(val) {
  53 + this.isCollapsed = val;
  54 + },
51 55 },
52 56 computed: {
53 57 _display() {
... ... @@ -74,7 +78,7 @@ export default {
74 78 const result = [];
75 79 const visibleNumber = this._display - 1;
76 80 items.forEach((item, index) => {
77   - if (!this.collapsed && index > visibleNumber && index < items.length) {
  81 + if (!this.isCollapsed && index > visibleNumber && index < items.length) {
78 82 result.push({ ...item, if: true, show: false });
79 83 } else {
80 84 result.push({ ...item, if: true, show: true });
... ... @@ -95,7 +99,7 @@ export default {
95 99 return this.formattedItems.length % this.rowItemCount;
96 100 },
97 101 operationSpan() {
98   - if (this.collapsed) {
  102 + if (this.isCollapsed) {
99 103 if (this._collapsedSpan) {
100 104 return this._collapsedSpan;
101 105 }
... ... @@ -125,7 +129,7 @@ export default {
125 129 search: this.onSearch,
126 130 reset: this.onReset,
127 131 collapse: this.onCollapse,
128   - collapsed: this.collapsed,
  132 + collapsed: this.isCollapsed,
129 133 loading: this.loading,
130 134 };
131 135 },
... ... @@ -151,7 +155,8 @@ export default {
151 155 },
152 156 // 折叠
153 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
  Diff comments   View file @cf0e2f1
... ... @@ -9,12 +9,23 @@
9 9 <slot name="header" v-bind="_slotScope"></slot>
10 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 29 </div>
19 30 <!-- 按钮区 -->
20 31 <div v-if="schema.action !== false" class="z-schema-page__action">
... ... @@ -182,7 +193,7 @@ setKeysDefault([&#39;value-table&#39;], {
182 193 },
183 194 });
184 195 setKeysDefault(['size', 'dialogTitle', 'dialogType'], String);
185   -setKeysDefault(['dialogVisible', 'auto', 'loading'], Boolean);
  196 +setKeysDefault(['dialogVisible', 'auto', 'loading', 'collapsed'], Boolean);
186 197 setKeysDefault(['api-search', 'api-submit', 'api-new', 'api-edit', 'api-get', 'api-detail', 'api-delete'], Function);
187 198  
188 199 export default {
... ... @@ -268,7 +279,7 @@ export default {
268 279 return this.size || get(this.schema, 'props.size') || (this.$ELEMENT || {}).size;
269 280 },
270 281 _slotScope() {
271   - const properties = ['selection', 'currentPage', 'pageSizes', 'pageSize', 'layout', 'total'];
  282 + const properties = ['selection', 'currentPage', 'pageSizes', 'pageSize', 'layout', 'total', 'collapsed'];
272 283 const methods = [
273 284 'search',
274 285 'onSearch',
... ...
packages/table/editable.vue
  Diff comments   View file @cf0e2f1
... ... @@ -27,15 +27,7 @@
27 27 </style>
28 28  
29 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 31 <slot name="left"></slot>
40 32 <template v-for="(item, index) in columns">
41 33 <el-table-column v-bind="item" :key="index">
... ...
packages/table/normal.vue
  Diff comments   View file @cf0e2f1
1 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 3 <slot name="left"></slot>
4 4 <template v-for="(item, index) in columns">
5 5 <el-table-column v-bind="item" :key="index">
... ... @@ -74,7 +74,7 @@ export default {
74 74 _elFormItemSize() {
75 75 return (this.elFormItem || {}).elFormItemSize;
76 76 },
77   - tableSize() {
  77 + _elSize() {
78 78 return this.size || this._elFormItemSize || (this.elForm || {}).size || (this.$ELEMENT || {}).size;
79 79 },
80 80 bindProps() {
... ...