framework / eagle-web-toolkit

Download as
Browse Code »

Commit d5eb758448c90abdaf7fa61b9a2056a0803ed03a

Authored by Aaron
1 parent cb43ed7d
Exists in master and in 1 other branch legacy

scheme支持具名table插槽和具名弹出框插槽

Showing 2 changed files with 25 additions and 7 deletions   Show diff stats
examples/views/docs/scheme.md
  Diff comments   View file @d5eb758
... ... @@ -12,6 +12,11 @@ Scheme是一个数æ®é©±åŠ¨çš„解决方案，通过既定的业务é…ç½®å‚æ•°ï¼
12 12 <template>
13 13 <eagle-scheme :list="schemeList">
14 14 <el-table-column type="selection" width="50" align="center"></el-table-column>
  15 + <template #table-status="{ setDialog }">
  16 + <el-table-column prop="status" label="激活状æ€" min-width="120">
  17 + <el-tag @click="setDialog({ title: 'Status模å¼', type: 'dialog-status' })" slot-scope="{ row: { status } }" :type="status === 'active' ? 'success' : 'danger'">{{ status === 'active' ? '激活' : 'ç¦ç”¨' }}</el-tag>
  18 + </el-table-column>
  19 + </template>
15 20 <template #search-status="{ model }">
16 21 <eagle-select v-model="model.status" :dataSource="dataSource"></eagle-select>
17 22 </template>
... ... @@ -28,6 +33,9 @@ Scheme是一个数æ®é©±åŠ¨çš„解决方案，通过既定的业务é…ç½®å‚æ•°ï¼
28 33 <div>这是一个自定义弹出框内容</div>
29 34 <div>{{ row }}</div>
30 35 </template>
  36 + <template #dialog-status>
  37 + <div>这是Status的内容</div>
  38 + </template>
31 39 <!-- 自定义按钮组 -->
32 40 <!-- <el-table-column slot="table-operation" prop="$operation" label="æ“作" min-width="140">
33 41 <el-tag>自定义按钮组</el-tag>
... ...
packages/scheme/index.vue
  Diff comments   View file @d5eb758
... ... @@ -75,6 +75,10 @@
75 75 }"
76 76 >
77 77 <slot></slot>
  78 + <!-- 表格具名插槽 -->
  79 + <template v-for="item in _tableList">
  80 + <slot v-if="$scopedSlots[`table-${item.key}`] || $slots[`table-${item.key}`]" :name="`table-${item.key}`" :slot="item.key" :setDialog="setDialog"></slot>
  81 + </template>
78 82 <!-- 表格后置插槽 -->
79 83 <template v-if="$scopedSlots['table-append'] || $slots['table-append']">
80 84 <slot name="table-append" slot="$append"></slot>
... ... @@ -197,18 +201,18 @@ export default {
197 201 { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
198 202 { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
199 203 { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
200   - { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
  204 + { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: '' },
201 205 { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
202   - { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
  206 + { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: '' },
203 207 { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
204 208 { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
205 209 { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
206   - { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
207   - { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
  210 + { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: '' },
  211 + { name: '李季', code: 'U00004', type: 'user', sort: 3, status: '' },
208 212 { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
209   - { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
210   - { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
211   - { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
  213 + { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: '' },
  214 + { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: '' },
  215 + { name: '李季', code: 'U00004', type: 'user', sort: 3, status: '' },
212 216 ],
213 217 // 表格选中项
214 218 tableSelection: [],
... ... @@ -348,6 +352,12 @@ export default {
348 352 this.dialogType = '';
349 353 });
350 354 },
  355 + // 设置弹出框模式
  356 + setDialog({ title, type }) {
  357 + this.dialogTitle = title;
  358 + this.dialogType = type;
  359 + this.dialogVisible = true;
  360 + }
351 361 }
352 362 };
353 363 </script>
... ...