Scheme组件表格支持自定义

Aaron
1 parent 330a169f
Showing 2 changed files with 10 additions and 5 deletions Show diff stats
examples/views/docs/scheme.md
packages/scheme/index.vue
@@ -10,7 +10,7 @@ Schemeæ˜¯ä¸€ä¸ªæ•°æ®é©±åŠ¨çš„è§£å†³æ–¹æ¡ˆï¼Œé€šè¿‡æ—¢å®šçš„ä¸šåŠ¡é…ç½®å‚æ•°ï¼
  
 ```html
 <template>
-  <eagle-scheme :list="schemeList">
+  <eagle-scheme :list="schemeList" :option="{ auto: false }">
     <!-- <div slot="action-bar" slot-scope="{ handleNew }">
       <el-button type="warn" @click="handleNew">æ–°å¢ž</el-button>
     </div> -->
@@ -46,7 +46,6 @@
   margin-right: 0px !important;
 }
 .eagle-scheme__pagination {
-  text-align: right;
   padding-top: 10px;
 }
 .eagle-scheme__dialog .el-dialog__body {
@@ -77,8 +76,14 @@
       </template>
     </div>
     <div class="eagle-scheme__table">
+      <slot v-if="$scopedSlots['table'] || $slots['table']" name="table"
+        v-bind="{ ...slotMethod, list: _tableList, value: tableData, loading: tableLoading,
+          tableProps: { border: true, 'row-key': 'id', ...tableProps },
+          tableEvents: { 'selection-change': handleTableSelectionChange, ...tableEvents }
+        }"
+      ></slot>
       <!-- 表格 -->
-      <eagle-table ref="eagle-table" :list="_tableList" :value="tableData"
+      <eagle-table v-else ref="eagle-table" :list="_tableList" :value="tableData"
         v-loading="tableLoading"
         element-loading-background="rgba(255, 255, 255, 0.6)"
         :tableProps="{ border: true, 'row-key': 'id', ...tableProps }"
@@ -117,7 +122,7 @@
         </el-table-column>
       </eagle-table>
       <!-- 分页器 -->
-      <div v-if="option.showPagination !== false" class="eagle-scheme__pagination">
+      <div v-if="option.showPagination !== false" class="eagle-scheme__pagination" :style="{ 'text-align': paginationProps.textAlign || 'right' }">
         <el-pagination size="small" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" v-loading="tableLoading" element-loading-spinner="none" element-loading-background="rgba(255, 255, 255, 0.6)"
           :page-size="pageSize" :total="totalCount" v-bind="{ 'page-sizes': [10, 20, 50], layout: 'total, sizes, prev, pager, next, jumper', ...paginationProps }"></el-pagination>
       </div>
@@ -267,7 +272,7 @@ export default {
   },
   mounted() {
     // 设置自动加载数据
-    if (!this.option.auto) {
+    if (this.option.auto !== false) {
       this.handleSearch();
     }
   },
...	...	@@ -10,7 +10,7 @@ Schemeæ˜¯ä¸€ä¸ªæ•°æ®é©±åŠ¨çš„è§£å†³æ–¹æ¡ˆï¼Œé€šè¿‡æ—¢å®šçš„ä¸šåŠ¡é…ç½®å‚æ•°ï¼
10	10
11	11	```html
12	12	<template>
13		- <eagle-scheme :list="schemeList">
	13	+ <eagle-scheme :list="schemeList" :option="{ auto: false }">
14	14	<!-- <div slot="action-bar" slot-scope="{ handleNew }">
15	15	<el-button type="warn" @click="handleNew">æ–°å¢ž</el-button>
16	16	</div> -->
...	...
...	...	@@ -46,7 +46,6 @@
46	46	margin-right: 0px !important;
47	47	}
48	48	.eagle-scheme__pagination {
49		- text-align: right;
50	49	padding-top: 10px;
51	50	}
52	51	.eagle-scheme__dialog .el-dialog__body {
...	...	@@ -77,8 +76,14 @@
77	76	</template>
78	77	</div>
79	78	<div class="eagle-scheme__table">
	79	+ <slot v-if="$scopedSlots['table'] \|\| $slots['table']" name="table"
	80	+ v-bind="{ ...slotMethod, list: _tableList, value: tableData, loading: tableLoading,
	81	+ tableProps: { border: true, 'row-key': 'id', ...tableProps },
	82	+ tableEvents: { 'selection-change': handleTableSelectionChange, ...tableEvents }
	83	+ }"
	84	+ ></slot>
80	85	<!-- 表格 -->
81		- <eagle-table ref="eagle-table" :list="_tableList" :value="tableData"
	86	+ <eagle-table v-else ref="eagle-table" :list="_tableList" :value="tableData"
82	87	v-loading="tableLoading"
83	88	element-loading-background="rgba(255, 255, 255, 0.6)"
84	89	:tableProps="{ border: true, 'row-key': 'id', ...tableProps }"
...	...	@@ -117,7 +122,7 @@
117	122	</el-table-column>
118	123	</eagle-table>
119	124	<!-- 分页器 -->
120		- <div v-if="option.showPagination !== false" class="eagle-scheme__pagination">
	125	+ <div v-if="option.showPagination !== false" class="eagle-scheme__pagination" :style="{ 'text-align': paginationProps.textAlign \|\| 'right' }">
121	126	<el-pagination size="small" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" v-loading="tableLoading" element-loading-spinner="none" element-loading-background="rgba(255, 255, 255, 0.6)"
122	127	:page-size="pageSize" :total="totalCount" v-bind="{ 'page-sizes': [10, 20, 50], layout: 'total, sizes, prev, pager, next, jumper', ...paginationProps }"></el-pagination>
123	128	</div>
...	...	@@ -267,7 +272,7 @@ export default {
267	272	},
268	273	mounted() {
269	274	// 设置自动加载数据
270		- if (!this.option.auto) {
	275	+ if (this.option.auto !== false) {
271	276	this.handleSearch();
272	277	}
273	278	},
...	...