Commit 8a627c74270c1d398565510de430d4c239e7ddf1
1 parent
6d1228a6
Exists in
master
and in
1 other branch
修改表格表单数据绑定及示例
Showing
2 changed files
with
114 additions
and
44 deletions
Show diff stats
examples/views/page/form-table/index.vue
| @@ -6,11 +6,18 @@ | @@ -6,11 +6,18 @@ | ||
| 6 | text-align: right !important; | 6 | text-align: right !important; |
| 7 | padding: 5px 15px !important; | 7 | padding: 5px 15px !important; |
| 8 | font-weight: bold; | 8 | font-weight: bold; |
| 9 | - background-color: #ecf7ff; | 9 | + background-color: #F5F7FA; |
| 10 | } | 10 | } |
| 11 | .eagle-form-table__value { | 11 | .eagle-form-table__value { |
| 12 | overflow: hidden; | 12 | overflow: hidden; |
| 13 | } | 13 | } |
| 14 | +.eagle-form-table__value .el-input__inner, | ||
| 15 | +.eagle-form-table__value .el-textarea__inner { | ||
| 16 | + border-left: 0; | ||
| 17 | + border-right: 0; | ||
| 18 | + border-top: 0; | ||
| 19 | + border-bottom: 0; | ||
| 20 | +} | ||
| 14 | </style> | 21 | </style> |
| 15 | 22 | ||
| 16 | <template> | 23 | <template> |
| @@ -34,39 +41,67 @@ | @@ -34,39 +41,67 @@ | ||
| 34 | <tr v-for="(item, index) in fullProps.list" :key="index" class="el-table__row"> | 41 | <tr v-for="(item, index) in fullProps.list" :key="index" class="el-table__row"> |
| 35 | <template v-if="(item instanceof Array)"> | 42 | <template v-if="(item instanceof Array)"> |
| 36 | <template v-for="(col, idx) in item"> | 43 | <template v-for="(col, idx) in item"> |
| 37 | - <td class="eagle-form-table__label" :style="labelStyle" :key="`${index}-${idx}-label`">{{ col.label }}</td> | ||
| 38 | - <td class="eagle-form-table__value" :key="`${index}-${idx}-value`" :colspan="getColspan({ item, col, idx })"> | ||
| 39 | - <component :is="col.type" v-bind="col.props" size="mini" /> | 44 | + <td class="eagle-form-table__label" :style="labelStyle" :key="`${index}-${idx}-label`" :rowspan="col.rowspan">{{ col.label }}</td> |
| 45 | + <td class="eagle-form-table__value" :key="`${index}-${idx}-value`" :colspan="getColspan({ item, col, idx })" :rowspan="col.rowspan"> | ||
| 46 | + <component :is="col.type" v-model="model[col.key]" v-bind="col.props" v-on="bindItemEvent(col)" size="mini" /> | ||
| 40 | </td> | 47 | </td> |
| 41 | </template> | 48 | </template> |
| 42 | </template> | 49 | </template> |
| 43 | <template v-else> | 50 | <template v-else> |
| 44 | - <td class="eagle-form-table__label" :style="labelStyle">{{ item.label }}</td> | ||
| 45 | - <td class="eagle-form-table__value" :colspan="maxColSpan - 1"> | ||
| 46 | - <component :is="item.type" v-bind="item.props" size="mini" /> | 51 | + <td class="eagle-form-table__label" :style="labelStyle" :rowspan="item.rowspan">{{ item.label }}</td> |
| 52 | + <td class="eagle-form-table__value" :colspan="maxColSpan - 1" :rowspan="item.rowspan"> | ||
| 53 | + <component :is="item.type" v-model="model[item.key]" v-bind="item.props" v-on="bindItemEvent(item)" size="mini" /> | ||
| 47 | </td> | 54 | </td> |
| 48 | </template> | 55 | </template> |
| 49 | </tr> | 56 | </tr> |
| 50 | </tbody> | 57 | </tbody> |
| 51 | </table> | 58 | </table> |
| 52 | </div> | 59 | </div> |
| 60 | + <div v-if="$scopedSlots['footer'] || $slots['footer']" class="el-table__footer-wrapper"> | ||
| 61 | + <table class="el-table__header w-full" cellspacing="0" cellpadding="0"> | ||
| 62 | + <tbody> | ||
| 63 | + <tr> | ||
| 64 | + <td class="eagle-form-table__value" :colspan="maxColSpan" style="text-align: center"> | ||
| 65 | + <slot name="footer"></slot> | ||
| 66 | + </td> | ||
| 67 | + </tr> | ||
| 68 | + </tbody> | ||
| 69 | + </table> | ||
| 70 | + </div> | ||
| 53 | </div> | 71 | </div> |
| 54 | </template> | 72 | </template> |
| 55 | 73 | ||
| 56 | <script> | 74 | <script> |
| 57 | export default { | 75 | export default { |
| 58 | name: 'form-table', | 76 | name: 'form-table', |
| 77 | + props: { | ||
| 78 | + value: Object, | ||
| 79 | + list: Array, | ||
| 80 | + title: String | ||
| 81 | + }, | ||
| 59 | data() { | 82 | data() { |
| 60 | return { | 83 | return { |
| 84 | + model: this.value || {}, | ||
| 61 | fullProps: { ...this.$attrs, ...this.$props }, | 85 | fullProps: { ...this.$attrs, ...this.$props }, |
| 62 | - labelStyle: { width: '80px' }, | 86 | + labelStyle: { width: '100px' }, |
| 87 | + } | ||
| 88 | + }, | ||
| 89 | + watch: { | ||
| 90 | + value(val = {}) { | ||
| 91 | + this.model = val; | ||
| 92 | + }, | ||
| 93 | + model: { | ||
| 94 | + handler(val) { | ||
| 95 | + this.$emit("input", val); | ||
| 96 | + }, | ||
| 97 | + deep: true, | ||
| 63 | } | 98 | } |
| 64 | }, | 99 | }, |
| 65 | computed: { | 100 | computed: { |
| 66 | // 配置列表中的最大列数 | 101 | // 配置列表中的最大列数 |
| 67 | maxColNum() { | 102 | maxColNum() { |
| 68 | let number = 1; | 103 | let number = 1; |
| 69 | - this.fullProps.list.forEach(item => { | 104 | + this.list.forEach(item => { |
| 70 | if (item instanceof Array) { | 105 | if (item instanceof Array) { |
| 71 | if (item.length > number) { | 106 | if (item.length > number) { |
| 72 | number = item.length; | 107 | number = item.length; |
| @@ -88,7 +123,23 @@ export default { | @@ -88,7 +123,23 @@ export default { | ||
| 88 | return col.colspan || normalColSpan; | 123 | return col.colspan || normalColSpan; |
| 89 | } | 124 | } |
| 90 | return 1; | 125 | return 1; |
| 91 | - } | 126 | + }, |
| 127 | + /** | ||
| 128 | + * @description 绑定表单项事件 | ||
| 129 | + * @param {Object} item 表单项配置 | ||
| 130 | + * @returns {Function} 事件函数 | ||
| 131 | + */ | ||
| 132 | + bindItemEvent(item) { | ||
| 133 | + if (item.on) { | ||
| 134 | + if (typeof item.on === 'function') { | ||
| 135 | + return item.on(this.model); | ||
| 136 | + } else { | ||
| 137 | + return item.on | ||
| 138 | + } | ||
| 139 | + } else { | ||
| 140 | + return undefined | ||
| 141 | + } | ||
| 142 | + }, | ||
| 92 | } | 143 | } |
| 93 | } | 144 | } |
| 94 | </script> | 145 | </script> |
examples/views/page/other.vue
| @@ -9,7 +9,8 @@ | @@ -9,7 +9,8 @@ | ||
| 9 | 9 | ||
| 10 | <template> | 10 | <template> |
| 11 | <div class="page-other"> | 11 | <div class="page-other"> |
| 12 | - <eg-form-table :list="list"></eg-form-table> | 12 | + {{ model }} |
| 13 | + <eg-form-table v-model="model" title="标题" :list="list"></eg-form-table> | ||
| 13 | </div> | 14 | </div> |
| 14 | </template> | 15 | </template> |
| 15 | 16 | ||
| @@ -26,29 +27,32 @@ export default { | @@ -26,29 +27,32 @@ export default { | ||
| 26 | tableData: [], | 27 | tableData: [], |
| 27 | model: { | 28 | model: { |
| 28 | name: 'name', | 29 | name: 'name', |
| 29 | - location: { | ||
| 30 | - areaName: 'hahhhahaa', | ||
| 31 | - }, | 30 | + // location: { |
| 31 | + // areaName: 'hahhhahaa', | ||
| 32 | + // }, | ||
| 32 | }, | 33 | }, |
| 33 | list: [ | 34 | list: [ |
| 34 | [ | 35 | [ |
| 35 | - { type: 'el-input', label: '名称', key: 'name' }, | ||
| 36 | - { type: 'el-input-number', label: '年龄', key: 'age' }, | ||
| 37 | - { type: 'el-input-number', label: '年龄2', key: 'age2' }, | ||
| 38 | - { type: 'el-input-number', label: '年龄3', key: 'age3' }, | ||
| 39 | - { type: 'el-input-number', label: '年龄3', key: 'age3' }, | 36 | + { type: 'el-input', label: '姓名', key: 'name' }, |
| 37 | + { type: 'el-input', label: '年龄', key: 'age', props: { type: 'number' } }, | ||
| 38 | + { type: 'el-input', label: '政治面貌', key: 'policy' }, | ||
| 39 | + { type: 'el-input', label: '籍贯', key: 'hometown' }, | ||
| 40 | + { type: 'el-switch', label: '婚姻', key: 'marry' }, | ||
| 40 | ], | 41 | ], |
| 41 | [ | 42 | [ |
| 42 | - { type: 'el-input', label: '名称', key: 'name', colspan: 1 }, | ||
| 43 | - { type: 'el-input-number', label: '年龄', key: 'age' }, | ||
| 44 | - { type: 'el-input-number', label: '年龄2', key: 'age2', colspan: 4 }, | 43 | + { type: 'el-input', label: '曾用名', key: 'oldname', colspan: 1 }, |
| 44 | + { type: 'el-input', label: '现居地', key: 'location' }, | ||
| 45 | + { type: 'el-input', label: '户籍地', key: 'address', colspan: 3 }, | ||
| 46 | + { type: 'el-image', label: '相片', key: 'image', props: { src: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1095903005,1370184727&fm=26&gp=0.jpg' }, | ||
| 47 | + rowspan: 2 | ||
| 48 | + }, | ||
| 45 | ], | 49 | ], |
| 46 | [ | 50 | [ |
| 47 | - { type: 'el-input', label: '名称1', key: 'name1', colspan: 4 }, | ||
| 48 | - { type: 'el-input-number', label: '年龄1', key: 'age1' }, | 51 | + { type: 'eagle-select', label: '爱好', key: 'hobby', props: { dataSource: [{ label: '游戏', value: '游戏' }] }, colspan: 3 }, |
| 52 | + { type: 'el-input', label: '教育程度', key: 'education', colspan: 3 }, | ||
| 49 | ], | 53 | ], |
| 50 | - { type: 'el-input', label: '备注', key: 'remark', props: { type: 'textarea', min: 3 } }, | ||
| 51 | - [{ type: 'el-input', label: '备注1', key: 'remark1', props: { type: 'textarea', min: 2 } }], | 54 | + { type: 'el-input', label: '工作经历', key: 'experience', props: { type: 'textarea', autosize: { minRows: 6 }, placeholder: '请输入' } }, |
| 55 | + [{ type: 'el-input', label: '备注', key: 'remark', props: { type: 'textarea', autosize: { minRows: 3 } } }], | ||
| 52 | ], | 56 | ], |
| 53 | option: { | 57 | option: { |
| 54 | list: [ | 58 | list: [ |
| @@ -143,25 +147,40 @@ export default { | @@ -143,25 +147,40 @@ export default { | ||
| 143 | mounted() { | 147 | mounted() { |
| 144 | setTimeout(() => { | 148 | setTimeout(() => { |
| 145 | this.model = { | 149 | this.model = { |
| 146 | - age: 7, | ||
| 147 | - name: '1', | ||
| 148 | - location: { | ||
| 149 | - locationMin: 'a', | ||
| 150 | - district: { | ||
| 151 | - province: 'p', | ||
| 152 | - city: 'c' | ||
| 153 | - }, | ||
| 154 | - areaName: 'a', | ||
| 155 | - homeNum: 'n', | ||
| 156 | - anumber: '1', | ||
| 157 | - bside: { | ||
| 158 | - bnumber: '2' | ||
| 159 | - } | ||
| 160 | - }, | ||
| 161 | - height: '3', | ||
| 162 | - weight: '4' | 150 | + name: '张三', |
| 151 | + age: 24, | ||
| 152 | + policy: '党员', | ||
| 153 | + hometown: '北京', | ||
| 154 | + marry: false, | ||
| 155 | + oldname: '张二', | ||
| 156 | + location: '上海', | ||
| 157 | + address: '北京市朝阳区', | ||
| 158 | + hobby: '游戏', | ||
| 159 | + education: '本科', | ||
| 160 | + image: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1095903005,1370184727&fm=26&gp=0.jpg' | ||
| 161 | + // experience: '暂无', | ||
| 162 | + // remark: '测试' | ||
| 163 | } | 163 | } |
| 164 | - this.tableData = [this.model]; | 164 | + // this.model = { |
| 165 | + // age: 7, | ||
| 166 | + // name: '1', | ||
| 167 | + // location: { | ||
| 168 | + // locationMin: 'a', | ||
| 169 | + // district: { | ||
| 170 | + // province: 'p', | ||
| 171 | + // city: 'c' | ||
| 172 | + // }, | ||
| 173 | + // areaName: 'a', | ||
| 174 | + // homeNum: 'n', | ||
| 175 | + // anumber: '1', | ||
| 176 | + // bside: { | ||
| 177 | + // bnumber: '2' | ||
| 178 | + // } | ||
| 179 | + // }, | ||
| 180 | + // height: '3', | ||
| 181 | + // weight: '4' | ||
| 182 | + // } | ||
| 183 | + // this.tableData = [this.model]; | ||
| 165 | }, 1000); | 184 | }, 1000); |
| 166 | }, | 185 | }, |
| 167 | methods: { | 186 | methods: { |