Commit 77f96aefe66e9dd48119fbbbc1c2b1e3febe56d1
1 parent
25bb330a
Exists in
master
and in
1 other branch
Scheme支持动态列
Showing
2 changed files
with
53 additions
and
10 deletions
Show diff stats
examples/views/docs/component/scheme.md
| @@ -10,7 +10,9 @@ Scheme是一个数æ®é©±åŠ¨çš„解决方案，通过既定的业务é…ç½®å‚æ•°ï¼ | @@ -10,7 +10,9 @@ Scheme是一个数æ®é©±åŠ¨çš„解决方案，通过既定的业务é…ç½®å‚æ•°ï¼ | ||
| 10 | 10 | ||
| 11 | ```html | 11 | ```html |
| 12 | <template> | 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 | </template> | 16 | </template> |
| 15 | 17 | ||
| 16 | <script> | 18 | <script> |
| @@ -27,7 +29,7 @@ export default { | @@ -27,7 +29,7 @@ export default { | ||
| 27 | { type: 'el-input', key: 'name', label: 'å称', rules: [{ required: true, message: '请输入å称' }] }, | 29 | { type: 'el-input', key: 'name', label: 'å称', rules: [{ required: true, message: '请输入å称' }] }, |
| 28 | { type: 'el-input', key: 'code', label: 'ç¼–ç ', rules: [{ required: true, message: '请输入编ç ' }], exclude: 'search' }, | 30 | { type: 'el-input', key: 'code', label: 'ç¼–ç ', rules: [{ required: true, message: '请输入编ç ' }], exclude: 'search' }, |
| 29 | { type: 'el-input', key: 'type', label: '类型' }, | 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 | { type: 'el-input', key: 'status', label: '状æ€' }, | 33 | { type: 'el-input', key: 'status', label: '状æ€' }, |
| 32 | ], | 34 | ], |
| 33 | } | 35 | } |
| @@ -47,7 +49,7 @@ export default { | @@ -47,7 +49,7 @@ export default { | ||
| 47 | ```html | 49 | ```html |
| 48 | <template> | 50 | <template> |
| 49 | <eagle-scheme :list="list" | 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 | </eagle-scheme> | 53 | </eagle-scheme> |
| 52 | </template> | 54 | </template> |
| 53 | 55 |
packages/scheme/index.vue
| @@ -17,6 +17,30 @@ | @@ -17,6 +17,30 @@ | ||
| 17 | .eagle-scheme__action { | 17 | .eagle-scheme__action { |
| 18 | display: flex; | 18 | display: flex; |
| 19 | align-items: center; | 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 | padding-bottom: 10px; | 44 | padding-bottom: 10px; |
| 21 | } | 45 | } |
| 22 | .eagle-scheme__action .eagle-scheme__action-btn:not(:first-child) { | 46 | .eagle-scheme__action .eagle-scheme__action-btn:not(:first-child) { |
| @@ -68,11 +92,24 @@ | @@ -68,11 +92,24 @@ | ||
| 68 | <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)"> | 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 | <slot v-if="$scopedSlots['action-bar'] || $slots['action-bar']" name="action-bar" v-bind="slotMethod" :model="formModel" :selection="tableSelection"></slot> | 93 | <slot v-if="$scopedSlots['action-bar'] || $slots['action-bar']" name="action-bar" v-bind="slotMethod" :model="formModel" :selection="tableSelection"></slot> |
| 70 | <template v-else> | 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 | </template> | 113 | </template> |
| 77 | </div> | 114 | </div> |
| 78 | <div class="eagle-scheme__table"> | 115 | <div class="eagle-scheme__table"> |
| @@ -278,7 +315,7 @@ export default { | @@ -278,7 +315,7 @@ export default { | ||
| 278 | const { search = [], form = [], table = [] } = generateListSpace(this.list); | 315 | const { search = [], form = [], table = [] } = generateListSpace(this.list); |
| 279 | this._searchList = search; | 316 | this._searchList = search; |
| 280 | this._formList = form; | 317 | this._formList = form; |
| 281 | - this._tableList = table; | 318 | + this._tableList = table.map(item => { return { ...item, visible: true } }); |
| 282 | } else { // 没有总配置列表时，单独传入作用域列表 | 319 | } else { // 没有总配置列表时，单独传入作用域列表 |
| 283 | this._searchList = this.searchList || []; | 320 | this._searchList = this.searchList || []; |
| 284 | this._formList = this.formList || []; | 321 | this._formList = this.formList || []; |
| @@ -346,9 +383,13 @@ export default { | @@ -346,9 +383,13 @@ export default { | ||
| 346 | this.$emit("change", val); | 383 | this.$emit("change", val); |
| 347 | }, | 384 | }, |
| 348 | deep: true | 385 | deep: true |
| 349 | - } | 386 | + }, |
| 350 | }, | 387 | }, |
| 351 | methods: { | 388 | methods: { |
| 389 | + // 动态改变表格列 | ||
| 390 | + dynamicChange() { | ||
| 391 | + this.$forceUpdate(); | ||
| 392 | + }, | ||
| 352 | // 查询数据 | 393 | // 查询数据 |
| 353 | async handleSearch(value) { | 394 | async handleSearch(value) { |
| 354 | const { currPageAlias = 'currPage', pageSizeAlias = 'pageSize' } = this.option || {}; | 395 | const { currPageAlias = 'currPage', pageSizeAlias = 'pageSize' } = this.option || {}; |