Commit c07ee98bf05426cd1f058dbaf03e8fb7482edd0a
1 parent
31dab67e
Exists in
master
and in
1 other branch
新增表格型表单校验规则与边框控制
Showing
2 changed files
with
35 additions
and
12 deletions
Show diff stats
examples/views/page/form-table/index.vue
| @@ -10,17 +10,24 @@ | @@ -10,17 +10,24 @@ | ||
| 10 | .eagle-form-table__value { | 10 | .eagle-form-table__value { |
| 11 | overflow: hidden; | 11 | overflow: hidden; |
| 12 | } | 12 | } |
| 13 | -/* .eagle-form-table__value .el-input__inner, | ||
| 14 | -.eagle-form-table__value .el-textarea__inner { | 13 | +.eagle-form-table__value.noborder .el-input__inner, |
| 14 | +.eagle-form-table__value.noborder .el-textarea__inner { | ||
| 15 | border-left: 0; | 15 | border-left: 0; |
| 16 | border-right: 0; | 16 | border-right: 0; |
| 17 | border-top: 0; | 17 | border-top: 0; |
| 18 | border-bottom: 0; | 18 | border-bottom: 0; |
| 19 | -} */ | 19 | +} |
| 20 | +.eagle-form-table .el-form-item__error { | ||
| 21 | + margin-left: 0; | ||
| 22 | +} | ||
| 23 | +.eagle-form-table .el-form-item__content { | ||
| 24 | + display: flex; | ||
| 25 | + flex-direction: column; | ||
| 26 | +} | ||
| 20 | </style> | 27 | </style> |
| 21 | 28 | ||
| 22 | <template> | 29 | <template> |
| 23 | - <div class="eagle-form-table el-table el-table--fit el-table--border el-table--enable-row-transition el-table--small"> | 30 | + <el-form :model="model" inline-message class="eagle-form-table el-table el-table--fit el-table--border el-table--enable-row-transition el-table--small"> |
| 24 | <div v-if="fullProps.title || $scopedSlots['title'] || $slots['title']" class="el-table__header-wrapper"> | 31 | <div v-if="fullProps.title || $scopedSlots['title'] || $slots['title']" class="el-table__header-wrapper"> |
| 25 | <table class="el-table__header w-full" cellspacing="0" cellpadding="0"> | 32 | <table class="el-table__header w-full" cellspacing="0" cellpadding="0"> |
| 26 | <thead> | 33 | <thead> |
| @@ -40,15 +47,19 @@ | @@ -40,15 +47,19 @@ | ||
| 40 | <tr v-for="(item, index) in fullProps.list" :key="index" class="el-table__row"> | 47 | <tr v-for="(item, index) in fullProps.list" :key="index" class="el-table__row"> |
| 41 | <template v-if="(item instanceof Array)"> | 48 | <template v-if="(item instanceof Array)"> |
| 42 | <template v-for="(col, idx) in item"> | 49 | <template v-for="(col, idx) in item"> |
| 43 | - <td class="eagle-form-table__label" :style="labelStyle" :key="`${index}-${idx}-label`" :rowspan="col.rowspan">{{ col.label }}</td> | ||
| 44 | - <td class="eagle-form-table__value" :key="`${index}-${idx}-value`" :colspan="getColspan({ item, col, idx })" :rowspan="col.rowspan"> | ||
| 45 | - <component :is="col.type" v-model="model[col.key]" v-bind="col.props" v-on="bindItemEvent(col)" size="mini" /> | 50 | + <td class="eagle-form-table__label" :style="labelStyle" :key="`${index}-${idx}-label`" :rowspan="col.rowspan"> |
| 51 | + <el-form-item :label="col.label" :prop="col.key" :rules="bindItemRules(col)" style="margin-bottom: 0;"></el-form-item> | ||
| 52 | + </td> | ||
| 53 | + <td class="eagle-form-table__value" :class="{ noborder: !border }" :key="`${index}-${idx}-value`" :colspan="getColspan({ item, col, idx })" :rowspan="col.rowspan"> | ||
| 54 | + <el-form-item :prop="col.key" :rules="bindItemRules(col)" style="margin-bottom: 0;"> | ||
| 55 | + <component :is="col.type" v-model="model[col.key]" v-bind="col.props" v-on="bindItemEvent(col)" size="mini" /> | ||
| 56 | + </el-form-item> | ||
| 46 | </td> | 57 | </td> |
| 47 | </template> | 58 | </template> |
| 48 | </template> | 59 | </template> |
| 49 | <template v-else> | 60 | <template v-else> |
| 50 | <td class="eagle-form-table__label" :style="labelStyle" :rowspan="item.rowspan">{{ item.label }}</td> | 61 | <td class="eagle-form-table__label" :style="labelStyle" :rowspan="item.rowspan">{{ item.label }}</td> |
| 51 | - <td class="eagle-form-table__value" :colspan="maxColSpan - 1" :rowspan="item.rowspan"> | 62 | + <td class="eagle-form-table__value" :class="{ noborder: !border }" :colspan="maxColSpan - 1" :rowspan="item.rowspan"> |
| 52 | <component :is="item.type" v-model="model[item.key]" v-bind="item.props" v-on="bindItemEvent(item)" size="mini" /> | 63 | <component :is="item.type" v-model="model[item.key]" v-bind="item.props" v-on="bindItemEvent(item)" size="mini" /> |
| 53 | </td> | 64 | </td> |
| 54 | </template> | 65 | </template> |
| @@ -60,14 +71,14 @@ | @@ -60,14 +71,14 @@ | ||
| 60 | <table class="el-table__header w-full" cellspacing="0" cellpadding="0"> | 71 | <table class="el-table__header w-full" cellspacing="0" cellpadding="0"> |
| 61 | <tbody> | 72 | <tbody> |
| 62 | <tr> | 73 | <tr> |
| 63 | - <td class="eagle-form-table__value" :colspan="maxColSpan" style="text-align: center"> | 74 | + <td class="eagle-form-table__value" :class="{ noborder: !border }" :colspan="maxColSpan" style="text-align: center"> |
| 64 | <slot name="footer"></slot> | 75 | <slot name="footer"></slot> |
| 65 | </td> | 76 | </td> |
| 66 | </tr> | 77 | </tr> |
| 67 | </tbody> | 78 | </tbody> |
| 68 | </table> | 79 | </table> |
| 69 | </div> | 80 | </div> |
| 70 | - </div> | 81 | + </el-form> |
| 71 | </template> | 82 | </template> |
| 72 | 83 | ||
| 73 | <script> | 84 | <script> |
| @@ -76,7 +87,11 @@ export default { | @@ -76,7 +87,11 @@ export default { | ||
| 76 | props: { | 87 | props: { |
| 77 | value: Object, | 88 | value: Object, |
| 78 | list: Array, | 89 | list: Array, |
| 79 | - title: String | 90 | + title: String, |
| 91 | + border: { | ||
| 92 | + type: Boolean, | ||
| 93 | + default: false | ||
| 94 | + } | ||
| 80 | }, | 95 | }, |
| 81 | data() { | 96 | data() { |
| 82 | return { | 97 | return { |
| @@ -139,6 +154,14 @@ export default { | @@ -139,6 +154,14 @@ export default { | ||
| 139 | return undefined | 154 | return undefined |
| 140 | } | 155 | } |
| 141 | }, | 156 | }, |
| 157 | + // 绑定组件校验规则 | ||
| 158 | + bindItemRules(item) { | ||
| 159 | + if (typeof item.rules === 'function') { | ||
| 160 | + return item.rules(this.model); | ||
| 161 | + } else { | ||
| 162 | + return item.rules; | ||
| 163 | + } | ||
| 164 | + }, | ||
| 142 | } | 165 | } |
| 143 | } | 166 | } |
| 144 | </script> | 167 | </script> |
examples/views/page/other.vue
| @@ -34,7 +34,7 @@ export default { | @@ -34,7 +34,7 @@ export default { | ||
| 34 | list: [ | 34 | list: [ |
| 35 | [ | 35 | [ |
| 36 | { type: 'el-input', label: '姓名', key: 'name', props: { disabled: true } }, | 36 | { type: 'el-input', label: '姓名', key: 'name', props: { disabled: true } }, |
| 37 | - { type: 'el-input', label: '年龄', key: 'age', props: { type: 'number' } }, | 37 | + { type: 'el-input', label: '年龄', key: 'age', props: { type: 'number' }, rules: [{ required: true, message: '请输入年龄' }] }, |
| 38 | { type: 'el-input', label: '政治面貌', key: 'policy' }, | 38 | { type: 'el-input', label: '政治面貌', key: 'policy' }, |
| 39 | { type: 'el-input', label: '籍贯', key: 'hometown' }, | 39 | { type: 'el-input', label: '籍贯', key: 'hometown' }, |
| 40 | { type: 'el-switch', label: '婚姻', key: 'marry' }, | 40 | { type: 'el-switch', label: '婚姻', key: 'marry' }, |