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

Aaron
1 parent cb43ed7d
Showing 2 changed files with 25 additions and 7 deletions Show diff stats
examples/views/docs/scheme.md
packages/scheme/index.vue
@@ -12,6 +12,11 @@ Schemeæ˜¯ä¸€ä¸ªæ•°æ®é©±åŠ¨çš„è§£å†³æ–¹æ¡ˆï¼Œé€šè¿‡æ—¢å®šçš„ä¸šåŠ¡é…ç½®å‚æ•°ï¼
 <template>
   <eagle-scheme :list="schemeList">
     <el-table-column type="selection" width="50" align="center"></el-table-column>
+    <template #table-status="{ setDialog }">
+      <el-table-column prop="status" label="æ¿€æ´»çŠ¶æ€" min-width="120">
+        <el-tag @click="setDialog({ title: 'Statusæ¨¡å¼', type: 'dialog-status' })" slot-scope="{ row: { status } }" :type="status === 'active' ? 'success' : 'danger'">{{ status === 'active' ? 'æ¿€æ´»' : 'ç¦ç”¨' }}</el-tag>
+      </el-table-column>
+    </template>
     <template #search-status="{ model }">
       <eagle-select v-model="model.status" :dataSource="dataSource"></eagle-select>
     </template>
@@ -28,6 +33,9 @@ Schemeæ˜¯ä¸€ä¸ªæ•°æ®é©±åŠ¨çš„è§£å†³æ–¹æ¡ˆï¼Œé€šè¿‡æ—¢å®šçš„ä¸šåŠ¡é…ç½®å‚æ•°ï¼
       <div>è¿™æ˜¯ä¸€ä¸ªè‡ªå®šä¹‰å¼¹å‡ºæ¡†å†…å®¹</div>
       <div>{{ row }}</div>
     </template>
+    <template #dialog-status>
+      <div>è¿™æ˜¯Statusçš„å†…å®¹</div>
+    </template>
     <!-- è‡ªå®šä¹‰æŒ‰é’®ç»„ -->
     <!-- <el-table-column slot="table-operation" prop="$operation" label="æ“ä½œ" min-width="140">
       <el-tag>è‡ªå®šä¹‰æŒ‰é’®ç»„</el-tag>
@@ -75,6 +75,10 @@
         }"
       >
         <slot></slot>
+        <!-- 表格具名插槽 -->
+        <template v-for="item in _tableList">
+          <slot v-if="$scopedSlots[`table-${item.key}`] || $slots[`table-${item.key}`]" :name="`table-${item.key}`" :slot="item.key" :setDialog="setDialog"></slot>
+        </template>
         <!-- 表格后置插槽 -->
         <template v-if="$scopedSlots['table-append'] || $slots['table-append']">
           <slot name="table-append" slot="$append"></slot>
@@ -197,18 +201,18 @@ export default {
         { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
         { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
         { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
-        { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
+        { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: '' },
         { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
-        { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
+        { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: '' },
         { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
         { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
         { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
-        { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
-        { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
+        { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: '' },
+        { name: '李季', code: 'U00004', type: 'user', sort: 3, status: '' },
         { name: '赵伯', code: 'U00001', type: 'admin', sort: 0, status: 'active' },
-        { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: 'active' },
-        { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: 'active' },
-        { name: '李季', code: 'U00004', type: 'user', sort: 3, status: 'active' },
+        { name: '钱仲', code: 'U00002', type: 'user', sort: 1, status: '' },
+        { name: '孙叔', code: 'U00003', type: 'user', sort: 2, status: '' },
+        { name: '李季', code: 'U00004', type: 'user', sort: 3, status: '' },
       ],
       // 表格选中项
       tableSelection: [],
@@ -348,6 +352,12 @@ export default {
         this.dialogType = '';
       });
     },
+    // 设置弹出框模式
+    setDialog({ title, type }) {
+      this.dialogTitle = title;
+      this.dialogType = type;
+      this.dialogVisible = true;
+    }
   }
 };
 </script>