Commit 8ae022c8d1c6ff00431a7360a1c336cb0a3e891e
1 parent
3268a18c
Exists in
master
and in
1 other branch
Scheme表格按钮支持替换与控制显示
Showing
3 changed files
with
28 additions
and
14 deletions
Show diff stats
examples/main.js
| @@ -18,7 +18,7 @@ const request = axios.create({ | @@ -18,7 +18,7 @@ const request = axios.create({ | ||
| 18 | timeout: 1000 * 60, | 18 | timeout: 1000 * 60, |
| 19 | withCredentials: true, | 19 | withCredentials: true, |
| 20 | headers: { | 20 | headers: { |
| 21 | - token: '04c8fe07d7ded87936343ef8f0a6767a', | 21 | + token: '5d3cb24cecd69e7d61d3c84912735e09', |
| 22 | 'Accept-Language': 'zh-CN' | 22 | 'Accept-Language': 'zh-CN' |
| 23 | } | 23 | } |
| 24 | }); | 24 | }); |
examples/views/page/test.vue
| 1 | <template> | 1 | <template> |
| 2 | - <eagle-scheme class="p-3" :list="schemeList" :option="{ $http: $axios, url: '/overseas/price/sale' }"> | 2 | + <eagle-scheme class="p-3" :list="schemeList" :option="{ $http: $axios, url: '/overseas/price/sale', showActionBtnDelete: false }"> |
| 3 | <template #search-enableFlag="{ model }"> | 3 | <template #search-enableFlag="{ model }"> |
| 4 | <eagle-select v-model="model.enableFlag" :dataSource="[{ label: '正常', value: true }, { label: '禁用', value: false }]"></eagle-select> | 4 | <eagle-select v-model="model.enableFlag" :dataSource="[{ label: '正常', value: true }, { label: '禁用', value: false }]"></eagle-select> |
| 5 | </template> | 5 | </template> |
| @@ -9,6 +9,12 @@ | @@ -9,6 +9,12 @@ | ||
| 9 | <span slot-scope="{ row: { productName, productCode } }">{{ productName || productCode }}</span> | 9 | <span slot-scope="{ row: { productName, productCode } }">{{ productName || productCode }}</span> |
| 10 | </el-table-column> | 10 | </el-table-column> |
| 11 | </template> | 11 | </template> |
| 12 | + <template #action-btn-new> | ||
| 13 | + <el-button>按钮</el-button> | ||
| 14 | + </template> | ||
| 15 | + <template #table-operation-btn-edit> | ||
| 16 | + <el-button class="eagle-scheme__table-btn" type="text">测试</el-button> | ||
| 17 | + </template> | ||
| 12 | <template #table-append> | 18 | <template #table-append> |
| 13 | <el-table-column prop="createTime" label="创建时间" min-width="180"></el-table-column> | 19 | <el-table-column prop="createTime" label="创建时间" min-width="180"></el-table-column> |
| 14 | <el-table-column prop="createUser" label="创建人" min-width="160" show-overflow-tooltip></el-table-column> | 20 | <el-table-column prop="createUser" label="创建人" min-width="160" show-overflow-tooltip></el-table-column> |
packages/scheme/index.vue
| @@ -33,11 +33,17 @@ | @@ -33,11 +33,17 @@ | ||
| 33 | display: flex; | 33 | display: flex; |
| 34 | align-items: center; | 34 | align-items: center; |
| 35 | } | 35 | } |
| 36 | -.eagle-scheme__table .eagle-scheme__table-btn:not(:last-child) { | ||
| 37 | - padding-left: 0px; | ||
| 38 | - padding-right: 10px; | ||
| 39 | - margin-left: 0px; | ||
| 40 | - margin-right: 0px; | 36 | +.eagle-scheme__table .eagle-scheme__table-btn { |
| 37 | + padding-left: 0px !important; | ||
| 38 | + padding-right: 10px !important; | ||
| 39 | + margin-left: 0px !important; | ||
| 40 | + margin-right: 0px !important; | ||
| 41 | +} | ||
| 42 | +.eagle-scheme__table .eagle-scheme__table-btn:last-child { | ||
| 43 | + padding-left: 0px !important; | ||
| 44 | + padding-right: 0px !important; | ||
| 45 | + margin-left: 0px !important; | ||
| 46 | + margin-right: 0px !important; | ||
| 41 | } | 47 | } |
| 42 | .eagle-scheme__pagination { | 48 | .eagle-scheme__pagination { |
| 43 | text-align: right; | 49 | text-align: right; |
| @@ -63,10 +69,11 @@ | @@ -63,10 +69,11 @@ | ||
| 63 | <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 | <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)"> |
| 64 | <slot v-if="$scopedSlots['action-bar'] || $slots['action-bar']" name="action-bar" :handleNew="handleNew" :handleDelete="handleDelete" :model="formModel" :selection="tableSelection" :setDialog="setDialog"></slot> | 70 | <slot v-if="$scopedSlots['action-bar'] || $slots['action-bar']" name="action-bar" :handleNew="handleNew" :handleDelete="handleDelete" :model="formModel" :selection="tableSelection" :setDialog="setDialog"></slot> |
| 65 | <template v-else> | 71 | <template v-else> |
| 66 | - <el-button class="eagle-scheme__action-btn" type="primary" size="small" @click="handleNew">{{ i18n('eagle.scheme.new') || '新增' }}</el-button> | ||
| 67 | - <el-button v-if="hasSelectionSlot" :disabled="tableSelection && tableSelection.length <= 0" class="eagle-scheme__action-btn" plain size="small" @click="handleDelete('more')">{{ i18n('eagle.scheme.delete') || '删除' }}</el-button> | ||
| 68 | - <slot v-if="$scopedSlots['action-button'] || $slots['action-button']" name="action-button" class="eagle-scheme__action-btn" :model="formModel" :selection="tableSelection" :setDialog="setDialog"></slot> | ||
| 69 | - <div v-if="hasSelectionSlot && tableSelection && tableSelection.length > 0" 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> | 72 | + <slot v-if="$scopedSlots['action-btn-new'] || $slots['action-btn-new']" name="action-btn-new" :handleNew="handleNew" :handleEdit="handleEdit" :handleDelete="handleDelete" :handleView="handleView" :model="formModel" :selection="tableSelection" :setDialog="setDialog"></slot> |
| 73 | + <el-button v-else class="eagle-scheme__action-btn" type="primary" size="small" @click="handleNew">{{ i18n('eagle.scheme.new') || '新增' }}</el-button> | ||
| 74 | + <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> | ||
| 75 | + <slot v-if="$scopedSlots['action-button'] || $slots['action-button']" name="action-button" class="eagle-scheme__action-btn" :handleNew="handleNew" :handleEdit="handleEdit" :handleDelete="handleDelete" :handleView="handleView" :model="formModel" :selection="tableSelection" :setDialog="setDialog"></slot> | ||
| 76 | + <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> | ||
| 70 | </template> | 77 | </template> |
| 71 | </div> | 78 | </div> |
| 72 | <div class="eagle-scheme__table"> | 79 | <div class="eagle-scheme__table"> |
| @@ -91,7 +98,7 @@ | @@ -91,7 +98,7 @@ | ||
| 91 | </template> | 98 | </template> |
| 92 | <!-- 表格操作栏插槽 - 自定义 --> | 99 | <!-- 表格操作栏插槽 - 自定义 --> |
| 93 | <template v-if="$scopedSlots['table-operation'] || $slots['table-operation']"> | 100 | <template v-if="$scopedSlots['table-operation'] || $slots['table-operation']"> |
| 94 | - <slot name="table-operation" slot="$end"></slot> | 101 | + <slot name="table-operation" slot="$end" :handleView="handleView" :handleEdit="handleEdit" :handleDelete="handleDelete"></slot> |
| 95 | </template> | 102 | </template> |
| 96 | <!-- 表格操作栏插槽 - 默认 --> | 103 | <!-- 表格操作栏插槽 - 默认 --> |
| 97 | <el-table-column v-else slot="$end" prop="$operation" :label="i18n('eagle.scheme.operation') || '操作'" min-width="140" fixed="right"> | 104 | <el-table-column v-else slot="$end" prop="$operation" :label="i18n('eagle.scheme.operation') || '操作'" min-width="140" fixed="right"> |
| @@ -99,8 +106,9 @@ | @@ -99,8 +106,9 @@ | ||
| 99 | <!-- 表格操作栏插槽 - 前置插槽 --> | 106 | <!-- 表格操作栏插槽 - 前置插槽 --> |
| 100 | <slot v-if="$scopedSlots['table-operation-btn'] || $slots['table-operation-btn']" name="table-operation-btn"></slot> | 107 | <slot v-if="$scopedSlots['table-operation-btn'] || $slots['table-operation-btn']" name="table-operation-btn"></slot> |
| 101 | <el-button v-if="option.showViewBtn !== false" class="eagle-scheme__table-btn" type="text" icon="el-icon-view" :title="i18n('eagle.scheme.detail') || '详情'" @click="handleView(slotScope)"></el-button> | 108 | <el-button v-if="option.showViewBtn !== false" class="eagle-scheme__table-btn" type="text" icon="el-icon-view" :title="i18n('eagle.scheme.detail') || '详情'" @click="handleView(slotScope)"></el-button> |
| 102 | - <el-button class="eagle-scheme__table-btn" type="text" icon="el-icon-edit" :title="i18n('eagle.scheme.edit') || '编辑'" @click="handleEdit(slotScope)"></el-button> | ||
| 103 | - <eagle-confirm class="eagle-scheme__table-btn" :title="i18n('eagle.scheme.deleteConfirm') || '是否删除？'" @confirm="handleDelete('one', slotScope)"> | 109 | + <slot v-if="$scopedSlots['table-operation-btn-edit'] || $slots['table-operation-btn-edit']" name="table-operation-btn-edit" :handleEdit="handleEdit"></slot> |
| 110 | + <el-button v-else-if="option.showEditBtn !== false" class="eagle-scheme__table-btn" type="text" icon="el-icon-edit" :title="i18n('eagle.scheme.edit') || '编辑'" @click="handleEdit(slotScope)"></el-button> | ||
| 111 | + <eagle-confirm v-if="option.showDeleteBtn !== false" class="eagle-scheme__table-btn" :title="i18n('eagle.scheme.deleteConfirm') || '是否删除？'" @confirm="handleDelete('one', slotScope)"> | ||
| 104 | <el-button type="text" icon="el-icon-delete" :title="i18n('eagle.scheme.delete') || '删除'"></el-button> | 112 | <el-button type="text" icon="el-icon-delete" :title="i18n('eagle.scheme.delete') || '删除'"></el-button> |
| 105 | </eagle-confirm> | 113 | </eagle-confirm> |
| 106 | <!-- 表格操作栏插槽 - 后置插槽 --> | 114 | <!-- 表格操作栏插槽 - 后置插槽 --> |