framework / eagle-web-toolkit

Download as
Browse Code »

Commit 77f96aefe66e9dd48119fbbbc1c2b1e3febe56d1

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

Scheme支持动态列

Showing 2 changed files with 53 additions and 10 deletions   Show diff stats
examples/views/docs/component/scheme.md
  Diff comments   View file @77f96ae
... ... @@ -10,7 +10,9 @@ Scheme是一个数æ®é©±åŠ¨çš„解决方案，通过既定的业务é…ç½®å‚æ•°ï¼
10 10  
11 11 ```html
12 12 <template>
13   - <eagle-scheme v-model="tableData" :list="list"></eagle-scheme>
  13 + <eagle-scheme v-model="tableData" :list="list">
  14 + <el-table-column type="selection" min-width="40"></el-table-column>
  15 + </eagle-scheme>
14 16 </template>
15 17  
16 18 <script>
... ... @@ -27,7 +29,7 @@ export default {
27 29 { type: 'el-input', key: 'name', label: 'å称', rules: [{ required: true, message: '请输入å称' }] },
28 30 { type: 'el-input', key: 'code', label: 'ç¼–ç ', rules: [{ required: true, message: '请输入编ç ' }], exclude: 'search' },
29 31 { type: 'el-input', key: 'type', label: '类型' },
30   - { type: 'el-input-number', key: 'sort', label: '排åº', include: ['form', 'table'], sortable: true },
  32 + { type: 'el-input-number', key: 'sort', label: '排åº', include: 'form', sortable: true },
31 33 { type: 'el-input', key: 'status', label: '状æ€' },
32 34 ],
33 35 }
... ... @@ -47,7 +49,7 @@ export default {
47 49 ```html
48 50 <template>
49 51 <eagle-scheme :list="list"
50   - :option="{ $http: $axios, url: 'product', currPageAlias: 'page', pageSizeAlias: 'size', totalCountAlias: 'total' }">
  52 + :option="{ $http: $axios, url: 'product', currPageAlias: 'page', pageSizeAlias: 'size', totalCountAlias: 'total', dynamicColumn: true }">
51 53 </eagle-scheme>
52 54 </template>
53 55  
... ...
packages/scheme/index.vue
  Diff comments   View file @77f96ae
... ... @@ -17,6 +17,30 @@
17 17 .eagle-scheme__action {
18 18 display: flex;
19 19 align-items: center;
  20 + justify-content: space-between;
  21 + padding-bottom: 10px;
  22 +}
  23 +.eagle-scheme__action-left {
  24 + flex: auto;
  25 + display: flex;
  26 + align-items: center;
  27 + justify-content: flex-start;
  28 +}
  29 +.eagle-scheme__action-right {
  30 + display: flex;
  31 + align-items: center;
  32 + justify-content: flex-end;
  33 + min-width: 120px;
  34 +}
  35 +.eagle-scheme__dynamic-column-btn {
  36 + display: flex;
  37 + flex-wrap: wrap;
  38 +}
  39 +.eagle-scheme__dynamic-column-btn .item {
  40 + display: flex;
  41 + align-items: center;
  42 + justify-content: space-between;
  43 + padding-right: 10px;
20 44 padding-bottom: 10px;
21 45 }
22 46 .eagle-scheme__action .eagle-scheme__action-btn:not(:first-child) {
... ... @@ -68,11 +92,24 @@
68 92 <div v-if="option.showActionBar !== false" class="eagle-scheme__action" v-loading="tableLoading" element-loading-spinner="none" element-loading-background="rgba(255, 255, 255, 0.6)">
69 93 <slot v-if="$scopedSlots['action-bar'] || $slots['action-bar']" name="action-bar" v-bind="slotMethod" :model="formModel" :selection="tableSelection"></slot>
70 94 <template v-else>
71   - <slot v-if="$scopedSlots['action-btn-new'] || $slots['action-btn-new']" name="action-btn-new" v-bind="slotMethod" :model="formModel" :selection="tableSelection"></slot>
72   - <el-button v-else-if="option.showActionBtnNew !== false" class="eagle-scheme__action-btn" type="primary" size="small" @click="handleNew">{{ i18n('eagle.scheme.new') || '新增' }}</el-button>
73   - <el-button v-if="hasSelectionSlot && option.showActionBtnDelete !== false" :disabled="tableSelection && tableSelection.length <= 0" class="eagle-scheme__action-btn" plain size="small" @click="handleDelete('more')">{{ i18n('eagle.scheme.delete') || '删除' }}</el-button>
74   - <slot v-if="$scopedSlots['action-button'] || $slots['action-button']" name="action-button" class="eagle-scheme__action-btn" :model="formModel" :selection="tableSelection" v-bind="slotMethod"></slot>
75   - <div v-if="hasSelectionSlot && tableSelection && tableSelection.length > 0 && option.showActionBtnDelete !== false" class="eagle-scheme__action-btn eagle-scheme__text-selection">{{ i18n('eagle.scheme.checked') || '已选中' }}<span class="eagle-scheme__text-selection-highlight">{{ tableSelection.length }}</span>{{ i18n('eagle.scheme.item') || '项' }}</div>
  95 + <div class="eagle-scheme__action-left">
  96 + <slot v-if="$scopedSlots['action-btn-new'] || $slots['action-btn-new']" name="action-btn-new" v-bind="slotMethod" :model="formModel" :selection="tableSelection"></slot>
  97 + <el-button v-else-if="option.showActionBtnNew !== false" class="eagle-scheme__action-btn" type="primary" size="small" @click="handleNew">{{ i18n('eagle.scheme.new') || '新增' }}</el-button>
  98 + <el-button v-if="hasSelectionSlot && option.showActionBtnDelete !== false" :disabled="tableSelection && tableSelection.length <= 0" class="eagle-scheme__action-btn" plain size="small" @click="handleDelete('more')">{{ i18n('eagle.scheme.delete') || '删除' }}</el-button>
  99 + <slot v-if="$scopedSlots['action-button'] || $slots['action-button']" name="action-button" class="eagle-scheme__action-btn" :model="formModel" :selection="tableSelection" v-bind="slotMethod"></slot>
  100 + <div v-if="hasSelectionSlot && tableSelection && tableSelection.length > 0 && option.showActionBtnDelete !== false" class="eagle-scheme__action-btn eagle-scheme__text-selection">{{ i18n('eagle.scheme.checked') || '已选中' }}<span class="eagle-scheme__text-selection-highlight">{{ tableSelection.length }}</span>{{ i18n('eagle.scheme.item') || '项' }}</div>
  101 + </div>
  102 + <div v-if="option.dynamicColumn === true" class="eagle-scheme__action-right">
  103 + <el-popover placement="left-end" trigger="click">
  104 + <div class="eagle-scheme__dynamic-column-btn">
  105 + <span class="item" v-for="(item, index) in _tableList" :key="index">
  106 + {{ item.label }}
  107 + <el-switch style="padding-left: 10px;" v-model="item.visible" @change="dynamicChange"></el-switch>
  108 + </span>
  109 + </div>
  110 + <el-button slot="reference" size="small" plain icon="el-icon-s-operation"></el-button>
  111 + </el-popover>
  112 + </div>
76 113 </template>
77 114 </div>
78 115 <div class="eagle-scheme__table">
... ... @@ -278,7 +315,7 @@ export default {
278 315 const { search = [], form = [], table = [] } = generateListSpace(this.list);
279 316 this._searchList = search;
280 317 this._formList = form;
281   - this._tableList = table;
  318 + this._tableList = table.map(item => { return { ...item, visible: true } });
282 319 } else { // 没有总配置列表时，单独传入作用域列表
283 320 this._searchList = this.searchList || [];
284 321 this._formList = this.formList || [];
... ... @@ -346,9 +383,13 @@ export default {
346 383 this.$emit("change", val);
347 384 },
348 385 deep: true
349   - }
  386 + },
350 387 },
351 388 methods: {
  389 + // 动态改变表格列
  390 + dynamicChange() {
  391 + this.$forceUpdate();
  392 + },
352 393 // 查询数据
353 394 async handleSearch(value) {
354 395 const { currPageAlias = 'currPage', pageSizeAlias = 'pageSize' } = this.option || {};
... ...