Commit d8d837e85b98d67d67fc81d81c50090280d2213c
1 parent
cf9fccec
Exists in
master
and in
1 other branch
Scheme支持配置操作栏宽度和左右
Showing
2 changed files
with
54 additions
and
2 deletions
Show diff stats
examples/views/page/other.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div>这是一个非markdown页面</div> | 2 | + <div> |
| 3 | + <p>这是一个非markdown页面</p> | ||
| 4 | + <el-form size="small"> | ||
| 5 | + <el-row :gutter="15" type="flex" style="flex-wrap: wrap;"> | ||
| 6 | + <template v-for="(item, index) in option.list2"> | ||
| 7 | + <el-col v-if="item.group && item.list" :key="index" :span="item.group.span || 24"> | ||
| 8 | + <el-row :gutter="15" type="flex" style="flex-wrap: wrap;"> | ||
| 9 | + <el-col :span="24">{{ item.group.title || item.group }}</el-col> | ||
| 10 | + <el-col v-for="(comp, idx) in item.list" :key="idx" :span="comp.span || 12"> | ||
| 11 | + <el-form-item :label="comp.label" :label-width="comp.labelWidth || '120px'" :prop="comp.key" :rules="comp.rules"> | ||
| 12 | + <component :is="comp.type"></component> | ||
| 13 | + </el-form-item> | ||
| 14 | + </el-col> | ||
| 15 | + </el-row> | ||
| 16 | + </el-col> | ||
| 17 | + <el-col v-else :span="item.span || 12" :key="index"> | ||
| 18 | + <el-form-item :label="item.label" :label-width="item.labelWidth || '120px'" :prop="item.key" :rules="item.rules"> | ||
| 19 | + <component :is="item.type"></component> | ||
| 20 | + </el-form-item> | ||
| 21 | + </el-col> | ||
| 22 | + </template> | ||
| 23 | + </el-row> | ||
| 24 | + </el-form> | ||
| 25 | + </div> | ||
| 3 | </template> | 26 | </template> |
| 4 | 27 | ||
| 5 | <script> | 28 | <script> |
| @@ -7,6 +30,35 @@ export default { | @@ -7,6 +30,35 @@ export default { | ||
| 7 | name: 'other', | 30 | name: 'other', |
| 8 | data() { | 31 | data() { |
| 9 | return { | 32 | return { |
| 33 | + option: { | ||
| 34 | + groups: ['basic', 'location'], | ||
| 35 | + list: [ | ||
| 36 | + { type: 'el-input', label: '名称', key: 'name' }, | ||
| 37 | + { type: 'el-input', label: '地址', key: 'location' }, | ||
| 38 | + ], | ||
| 39 | + list2: [ | ||
| 40 | + { | ||
| 41 | + group: { title: 'basic', span: 12 }, | ||
| 42 | + list: [ | ||
| 43 | + { type: 'el-input', label: '名称', key: 'name' }, | ||
| 44 | + { type: 'el-input-number', label: '名称1', key: 'name1' }, | ||
| 45 | + { type: 'el-switch', label: '名称2', key: 'name2' }, | ||
| 46 | + { type: 'el-input', label: '名称3', key: 'name3' }, | ||
| 47 | + ], | ||
| 48 | + }, | ||
| 49 | + { | ||
| 50 | + group: 'location', | ||
| 51 | + list: [ | ||
| 52 | + { type: 'el-input', label: '地址', key: 'location' }, | ||
| 53 | + ], | ||
| 54 | + }, | ||
| 55 | + { type: 'el-input', label: '名称', key: 'name' }, | ||
| 56 | + { type: 'el-input', label: '地址', key: 'location' }, | ||
| 57 | + { type: 'el-input-number', label: '名称1', key: 'name1' }, | ||
| 58 | + { type: 'el-switch', label: '名称2', key: 'name2' }, | ||
| 59 | + { type: 'el-input', label: '名称3', key: 'name3' }, | ||
| 60 | + ] | ||
| 61 | + } | ||
| 10 | } | 62 | } |
| 11 | }, | 63 | }, |
| 12 | methods: { | 64 | methods: { |
packages/scheme/index.vue
| @@ -171,7 +171,7 @@ | @@ -171,7 +171,7 @@ | ||
| 171 | && !$slots['table-operation-btn-append'] | 171 | && !$slots['table-operation-btn-append'] |
| 172 | )" | 172 | )" |
| 173 | > | 173 | > |
| 174 | - <el-table-column slot="$end" prop="$operation" :label="i18n('eagle.scheme.operation') || '操作'" min-width="140" fixed="right"> | 174 | + <el-table-column slot="$end" prop="$operation" :label="i18n('eagle.scheme.operation') || '操作'" :min-width="option.operationWidth || 140" :fixed="option.operationFixed || 'right'"> |
| 175 | <div class="eagle-scheme__table-operation" slot-scope="slotScope"> | 175 | <div class="eagle-scheme__table-operation" slot-scope="slotScope"> |
| 176 | <!-- 表格操作栏插槽 - 前置插槽 --> | 176 | <!-- 表格操作栏插槽 - 前置插槽 --> |
| 177 | <slot v-if="$scopedSlots['table-operation-btn'] || $slots['table-operation-btn']" name="table-operation-btn" :slotScope="slotScope" v-bind="slotMethod"></slot> | 177 | <slot v-if="$scopedSlots['table-operation-btn'] || $slots['table-operation-btn']" name="table-operation-btn" :slotScope="slotScope" v-bind="slotMethod"></slot> |