|
1 | 1 | <template> |
2 | 2 | <div class="grid-container"> |
3 | 3 | <div ref="topView"> |
4 | | - <component |
5 | | - v-if="attrs.top" |
6 | | - :is="attrs.top.componentName" |
7 | | - :attrs="attrs.top" |
8 | | - /> |
| 4 | + <component v-if="attrs.top" :is="attrs.top.componentName" :attrs="attrs.top" /> |
9 | 5 | <el-card |
10 | 6 | shadow="never" |
11 | 7 | :body-style="{ padding: 0 }" |
|
66 | 62 | @clear="getData" |
67 | 63 | @keyup.enter.native="getData" |
68 | 64 | > |
69 | | - <el-button @click="getData" :loading="loading" slot="append" |
70 | | - >搜索</el-button |
71 | | - > |
| 65 | + <el-button @click="getData" :loading="loading" slot="append">搜索</el-button> |
72 | 66 | </el-input> |
73 | 67 | </div> |
74 | 68 | <div class="flex-c"> |
|
87 | 81 | :is="component.componentName" |
88 | 82 | :attrs="component" |
89 | 83 | /> |
90 | | - <el-divider |
91 | | - direction="vertical" |
92 | | - v-if="!attrs.attributes.hideCreateButton" |
93 | | - ></el-divider> |
| 84 | + <el-divider direction="vertical" v-if="!attrs.attributes.hideCreateButton"></el-divider> |
94 | 85 | <div class="icon-actions"> |
95 | 86 | <el-dropdown trigger="click"> |
96 | | - <el-tooltip |
97 | | - class="item" |
98 | | - effect="dark" |
99 | | - content="密度" |
100 | | - placement="top" |
101 | | - > |
| 87 | + <el-tooltip class="item" effect="dark" content="密度" placement="top"> |
102 | 88 | <i class="el-icon-rank hover"></i> |
103 | 89 | </el-tooltip> |
104 | 90 | <el-dropdown-menu slot="dropdown"> |
|
117 | 103 | </el-dropdown-menu> |
118 | 104 | </el-dropdown> |
119 | 105 |
|
120 | | - <el-tooltip |
121 | | - class="item" |
122 | | - effect="dark" |
123 | | - content="刷新" |
124 | | - placement="top" |
125 | | - > |
| 106 | + <el-tooltip class="item" effect="dark" content="刷新" placement="top"> |
126 | 107 | <i class="el-icon-refresh hover" @click="getData"></i> |
127 | 108 | </el-tooltip> |
128 | 109 | </div> |
|
149 | 130 | @sort-change="onTableSortChange" |
150 | 131 | @selection-change="onTableselectionChange" |
151 | 132 | > |
152 | | - <el-table-column |
153 | | - v-if="attrs.attributes.selection" |
154 | | - align="center" |
155 | | - type="selection" |
156 | | - ></el-table-column> |
157 | | - <el-table-column |
158 | | - v-if="attrs.tree" |
159 | | - align="center" |
160 | | - width="50" |
161 | | - ></el-table-column> |
| 133 | + <el-table-column v-if="attrs.attributes.selection" align="center" type="selection"></el-table-column> |
| 134 | + <el-table-column v-if="attrs.tree" align="center" width="50"></el-table-column> |
162 | 135 | <template v-for="column in attrs.columnAttributes"> |
163 | 136 | <el-table-column |
164 | 137 | :type="column.type" |
|
175 | 148 | > |
176 | 149 | <template slot="header" slot-scope="scope"> |
177 | 150 | <span>{{ scope.column.label }}</span> |
178 | | - <el-tooltip |
179 | | - placement="top" |
180 | | - v-if="column.help" |
181 | | - :content="column.help" |
182 | | - > |
| 151 | + <el-tooltip placement="top" v-if="column.help" :content="column.help"> |
183 | 152 | <i class="el-icon-question hover"></i> |
184 | 153 | </el-tooltip> |
185 | 154 | </template> |
186 | 155 | <template slot-scope="scope"> |
187 | | - <ColumnDisplay |
188 | | - :scope="scope" |
189 | | - :columns="attrs.columnAttributes" |
190 | | - /> |
| 156 | + <ColumnDisplay :scope="scope" :columns="attrs.columnAttributes" /> |
191 | 157 | </template> |
192 | 158 | </el-table-column> |
193 | 159 | </template> |
|
211 | 177 | </el-table-column> |
212 | 178 | </el-table> |
213 | 179 | </div> |
214 | | - <div class="table-page padding-xs" v-if="!attrs.hidePage"> |
| 180 | + <div ref="pageView" class="table-page padding-xs" v-if="!attrs.hidePage"> |
215 | 181 | <el-pagination |
216 | 182 | :layout="attrs.pageLayout" |
217 | 183 | :hide-on-single-page="false" |
|
225 | 191 | /> |
226 | 192 | </div> |
227 | 193 | </el-card> |
228 | | - <component |
229 | | - v-if="attrs.bottom" |
230 | | - :is="attrs.bottom.componentName" |
231 | | - :attrs="attrs.bottom" |
232 | | - /> |
| 194 | + <div ref="bottomComponentView"> |
| 195 | + <component v-if="attrs.bottom" :is="attrs.bottom.componentName" :attrs="attrs.bottom" /> |
| 196 | + </div> |
| 197 | + |
233 | 198 | <DialogForm |
234 | 199 | ref="DialogGridFrom" |
235 | 200 | v-if="attrs.dialogForm" |
@@ -279,6 +244,8 @@ export default { |
279 | 244 | tabsActiveName: "all", |
280 | 245 | topViewHeight: 0, |
281 | 246 | toolbarsViewHeight: 0, |
| 247 | + pageViewHeight: 0, |
| 248 | + bottomComponentViewHeight: 0, |
282 | 249 | }; |
283 | 250 | }, |
284 | 251 |
|
@@ -332,7 +299,11 @@ export default { |
332 | 299 |
|
333 | 300 | this.$nextTick(() => { |
334 | 301 | this.topViewHeight = this.$refs.topView.offsetHeight; |
| 302 | +
|
335 | 303 | this.toolbarsViewHeight = this.$refs.toolbarsView.offsetHeight; |
| 304 | +
|
| 305 | + this.pageViewHeight = this.$refs.pageView.offsetHeight; |
| 306 | + this.bottomComponentViewHeight = this.$refs.bottomComponentView.offsetHeight; |
336 | 307 | }); |
337 | 308 | }, |
338 | 309 | destroyed() { |
@@ -363,19 +334,18 @@ export default { |
363 | 334 | //获取数据 |
364 | 335 | getData() { |
365 | 336 | this.loading = true; |
366 | | - this.$http |
367 | | - [this.attrs.method](this.attrs.dataUrl, { |
368 | | - params: { |
369 | | - get_data: true, |
370 | | - page: this.page, |
371 | | - per_page: this.pageData.pageSize, |
372 | | - ...this.sort, |
373 | | - ...this.q_search, |
374 | | - ...this.filterFormData, |
375 | | - ...this.tabsSelectdata, |
376 | | - ...this.$route.query, |
377 | | - }, |
378 | | - }) |
| 337 | + this.$http[this.attrs.method](this.attrs.dataUrl, { |
| 338 | + params: { |
| 339 | + get_data: true, |
| 340 | + page: this.page, |
| 341 | + per_page: this.pageData.pageSize, |
| 342 | + ...this.sort, |
| 343 | + ...this.q_search, |
| 344 | + ...this.filterFormData, |
| 345 | + ...this.tabsSelectdata, |
| 346 | + ...this.$route.query, |
| 347 | + }, |
| 348 | + }) |
379 | 349 | .then(({ data }) => { |
380 | 350 | if (!this.attrs.hidePage) { |
381 | 351 | this.tableData = data.data; |
@@ -486,10 +456,12 @@ export default { |
486 | 456 | return ( |
487 | 457 | window.innerHeight - |
488 | 458 | 55 - |
| 459 | + 20 - |
489 | 460 | window.rootFooterHeight - |
490 | | - (this.topViewHeight > 0 ? this.topViewHeight + 10 : 0) - |
491 | | - 25 - |
492 | | - this.toolbarsViewHeight |
| 461 | + this.topViewHeight - |
| 462 | + (this.toolbarsViewHeight > 0 ? this.toolbarsViewHeight + 12 : 0) - |
| 463 | + this.pageViewHeight - |
| 464 | + this.bottomComponentViewHeight |
493 | 465 | ); |
494 | 466 | } |
495 | 467 | return this.attrs.attributes.height; |
|
0 commit comments