frontend / zee

Download as
Browse Code »

Commit 159d0a07ef532dc8d79f3d0bc3ca6f906e0bb296

Authored by 刘汉宸
1 parent 84a988a8
Exists in master and in 2 other branches Feature-渲染优化, Refactor-2.0

feat: 新增SchemaPage自定义Table插槽

Showing 1 changed file with 33 additions and 31 deletions   Show diff stats
packages/schema-page/index.vue
  Diff comments   View file @159d0a0
... ... @@ -25,36 +25,38 @@
25 25 </slot>
26 26 </div>
27 27 <!-- 表格内容 -->
28   - <div v-if="schema.table" class="z-schema-page__table">
29   - <z-schema-table
30   - :size="_size"
31   - :schema="tableSchemaDefaultProps(schema.table)"
32   - v-model="tableData"
33   - v-loading="schema.loading !== false ? tableLoading : false"
34   - @selection-change="onTableSelectionChange"
35   - >
36   - <template #left>
37   - <el-table-column v-if="schema.selection !== false" type="selection" width="40" align="center"></el-table-column>
38   - </template>
39   - <template v-for="item in getSlotKeys('table-')" #[item.name]="slotScope">
40   - <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
41   - </template>
42   - <slot v-if="schema.operation !== false" name="operation" v-bind="_slotScope">
43   - <el-table-column v-bind="{ label: '操作', width: '90', align: 'center', ...(schema.operation || {}) }">
44   - <template #default="{ row, column, $index }">
45   - <div class="z-schema-page__table-operation">
46   - <slot name="operation-left" v-bind="{ ..._slotScope, row, column, $index }"></slot>
47   - <slot name="operation-button" v-bind="{ ..._slotScope, row, column, $index }"></slot>
48   - <el-button type="text" icon="el-icon-edit" title="编辑" @click="openEdit(row)"></el-button>
49   - <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" title="确定删除吗？" placement="top" @confirm="onDelete([row])">
50   - <el-button slot="reference" type="text" icon="el-icon-delete" title="删除"></el-button>
51   - </el-popconfirm>
52   - <slot name="operation-right" v-bind="{ ..._slotScope, row, column, $index }"></slot>
53   - </div>
54   - </template>
55   - </el-table-column>
56   - </slot>
57   - </z-schema-table>
  28 + <div v-if="schema.table || $scopedSlots.table" class="z-schema-page__table">
  29 + <slot name="table" v-bind="_slotScope">
  30 + <z-schema-table
  31 + :size="_size"
  32 + :schema="tableSchemaDefaultProps(schema.table)"
  33 + v-model="tableData"
  34 + v-loading="schema.loading !== false ? tableLoading : false"
  35 + @selection-change="onTableSelectionChange"
  36 + >
  37 + <template #left>
  38 + <el-table-column v-if="schema.selection !== false" type="selection" width="40" align="center"></el-table-column>
  39 + </template>
  40 + <template v-for="item in getSlotKeys('table-')" #[item.name]="slotScope">
  41 + <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
  42 + </template>
  43 + <slot v-if="schema.operation !== false" name="operation" v-bind="_slotScope">
  44 + <el-table-column v-bind="{ label: '操作', width: '90', align: 'center', ...(schema.operation || {}) }">
  45 + <template #default="{ row, column, $index }">
  46 + <div class="z-schema-page__table-operation">
  47 + <slot name="operation-left" v-bind="{ ..._slotScope, row, column, $index }"></slot>
  48 + <slot name="operation-button" v-bind="{ ..._slotScope, row, column, $index }"></slot>
  49 + <el-button type="text" icon="el-icon-edit" title="编辑" @click="openEdit(row)"></el-button>
  50 + <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" title="确定删除吗？" placement="top" @confirm="onDelete([row])">
  51 + <el-button slot="reference" type="text" icon="el-icon-delete" title="删除"></el-button>
  52 + </el-popconfirm>
  53 + <slot name="operation-right" v-bind="{ ..._slotScope, row, column, $index }"></slot>
  54 + </div>
  55 + </template>
  56 + </el-table-column>
  57 + </slot>
  58 + </z-schema-table>
  59 + </slot>
58 60 </div>
59 61 <!-- 底部区域 -->
60 62 <div v-if="schema.selection !== false || schema.pagination !== false" class="z-schema-page__footer">
... ... @@ -258,7 +260,7 @@ export default {
258 260 },
259 261 _slotScope() {
260 262 const properties = ['selection', 'currentPage', 'pageSizes', 'pageSize', 'layout', 'total'];
261   - const methods = ['search', 'onSearch', 'onDelete', 'onDeleteMultiple', 'openNew', 'openEdit', 'openDetail', 'openDialog', 'closeDialog'];
  263 + const methods = ['search', 'onSearch', 'onDelete', 'onDeleteMultiple', 'onTableSelectionChange', 'openNew', 'openEdit', 'openDetail', 'openDialog', 'closeDialog'];
262 264 const defaultScope = {
263 265 size: this._size,
264 266 loading: this.tableLoading,
... ...