framework / eagle-web-toolkit

Download as
Browse Code »

Commit c07ee98bf05426cd1f058dbaf03e8fb7482edd0a

Authored by Aaron
1 parent 31dab67e
Exists in master and in 1 other branch legacy

新增表格型表单校验规则与边框控制

Showing 2 changed files with 35 additions and 12 deletions   Show diff stats
examples/views/page/form-table/index.vue
  Diff comments   View file @c07ee98
... ... @@ -10,17 +10,24 @@
10 10 .eagle-form-table__value {
11 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 15 border-left: 0;
16 16 border-right: 0;
17 17 border-top: 0;
18 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 27 </style>
21 28  
22 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 31 <div v-if="fullProps.title || $scopedSlots['title'] || $slots['title']" class="el-table__header-wrapper">
25 32 <table class="el-table__header w-full" cellspacing="0" cellpadding="0">
26 33 <thead>
... ... @@ -40,15 +47,19 @@
40 47 <tr v-for="(item, index) in fullProps.list" :key="index" class="el-table__row">
41 48 <template v-if="(item instanceof Array)">
42 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 57 </td>
47 58 </template>
48 59 </template>
49 60 <template v-else>
50 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 63 <component :is="item.type" v-model="model[item.key]" v-bind="item.props" v-on="bindItemEvent(item)" size="mini" />
53 64 </td>
54 65 </template>
... ... @@ -60,14 +71,14 @@
60 71 <table class="el-table__header w-full" cellspacing="0" cellpadding="0">
61 72 <tbody>
62 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 75 <slot name="footer"></slot>
65 76 </td>
66 77 </tr>
67 78 </tbody>
68 79 </table>
69 80 </div>
70   - </div>
  81 + </el-form>
71 82 </template>
72 83  
73 84 <script>
... ... @@ -76,7 +87,11 @@ export default {
76 87 props: {
77 88 value: Object,
78 89 list: Array,
79   - title: String
  90 + title: String,
  91 + border: {
  92 + type: Boolean,
  93 + default: false
  94 + }
80 95 },
81 96 data() {
82 97 return {
... ... @@ -139,6 +154,14 @@ export default {
139 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 167 </script>
... ...
examples/views/page/other.vue
  Diff comments   View file @c07ee98
... ... @@ -34,7 +34,7 @@ export default {
34 34 list: [
35 35 [
36 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 38 { type: 'el-input', label: '政治面貌', key: 'policy' },
39 39 { type: 'el-input', label: '籍贯', key: 'hometown' },
40 40 { type: 'el-switch', label: '婚姻', key: 'marry' },
... ...