Commit 6d1228a60c0572108ccf7ec125032c0e0ed98cd5
1 parent
9b28608c
Exists in
master
and in
1 other branch
新增表格型表单
Showing
3 changed files
with
326 additions
and
44 deletions
Show diff stats
| ... | ... | @@ -0,0 +1,94 @@ |
| 1 | +<style> | |
| 2 | +.eagle-form-table .eagle-form-table__body td { | |
| 3 | + padding: 5px; | |
| 4 | +} | |
| 5 | +.eagle-form-table__label { | |
| 6 | + text-align: right !important; | |
| 7 | + padding: 5px 15px !important; | |
| 8 | + font-weight: bold; | |
| 9 | + background-color: #ecf7ff; | |
| 10 | +} | |
| 11 | +.eagle-form-table__value { | |
| 12 | + overflow: hidden; | |
| 13 | +} | |
| 14 | +</style> | |
| 15 | + | |
| 16 | +<template> | |
| 17 | + <div class="eagle-form-table el-table el-table--fit el-table--border el-table--enable-row-transition el-table--small"> | |
| 18 | + <div v-if="fullProps.title || $scopedSlots['title'] || $slots['title']" class="el-table__header-wrapper"> | |
| 19 | + <table class="el-table__header w-full" cellspacing="0" cellpadding="0"> | |
| 20 | + <thead> | |
| 21 | + <tr class="el-table__row"> | |
| 22 | + <!-- 标题插槽 --> | |
| 23 | + <th v-if="$scopedSlots['title'] || $slots['title']"> | |
| 24 | + <slot name="title"></slot> | |
| 25 | + </th> | |
| 26 | + <th v-else class="is-center">{{ fullProps.title }}</th> | |
| 27 | + </tr> | |
| 28 | + </thead> | |
| 29 | + </table> | |
| 30 | + </div> | |
| 31 | + <div class="el-table__body-wrapper text-lg"> | |
| 32 | + <table class="el-table__body w-full" cellspacing="0" cellpadding="0"> | |
| 33 | + <tbody class="eagle-form-table__body"> | |
| 34 | + <tr v-for="(item, index) in fullProps.list" :key="index" class="el-table__row"> | |
| 35 | + <template v-if="(item instanceof Array)"> | |
| 36 | + <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" /> | |
| 40 | + </td> | |
| 41 | + </template> | |
| 42 | + </template> | |
| 43 | + <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" /> | |
| 47 | + </td> | |
| 48 | + </template> | |
| 49 | + </tr> | |
| 50 | + </tbody> | |
| 51 | + </table> | |
| 52 | + </div> | |
| 53 | + </div> | |
| 54 | +</template> | |
| 55 | + | |
| 56 | +<script> | |
| 57 | +export default { | |
| 58 | + name: 'form-table', | |
| 59 | + data() { | |
| 60 | + return { | |
| 61 | + fullProps: { ...this.$attrs, ...this.$props }, | |
| 62 | + labelStyle: { width: '80px' }, | |
| 63 | + } | |
| 64 | + }, | |
| 65 | + computed: { | |
| 66 | + // 配置列表中的最大列数 | |
| 67 | + maxColNum() { | |
| 68 | + let number = 1; | |
| 69 | + this.fullProps.list.forEach(item => { | |
| 70 | + if (item instanceof Array) { | |
| 71 | + if (item.length > number) { | |
| 72 | + number = item.length; | |
| 73 | + } | |
| 74 | + } | |
| 75 | + }); | |
| 76 | + return number; | |
| 77 | + }, | |
| 78 | + // 配置列表的最大占位数 | |
| 79 | + maxColSpan() { | |
| 80 | + return this.maxColNum * 2; | |
| 81 | + }, | |
| 82 | + }, | |
| 83 | + methods: { | |
| 84 | + getColspan({ item, col, idx }) { | |
| 85 | + // 如果存在列数小于最大列数的行 | |
| 86 | + if (item.length < this.maxColNum) { | |
| 87 | + const normalColSpan = Math.floor((this.maxColSpan - item.length) / item.length); | |
| 88 | + return col.colspan || normalColSpan; | |
| 89 | + } | |
| 90 | + return 1; | |
| 91 | + } | |
| 92 | + } | |
| 93 | +} | |
| 94 | +</script> | ... | ... |
| ... | ... | @@ -0,0 +1,207 @@ |
| 1 | +<style> | |
| 2 | +.custom-form { | |
| 3 | + background: #cfc; | |
| 4 | +} | |
| 5 | +.custom-title { | |
| 6 | + background: #ccf; | |
| 7 | +} | |
| 8 | +.custom-content { | |
| 9 | + background: #fcc; | |
| 10 | + margin: 10px; | |
| 11 | +} | |
| 12 | +.custom-item { | |
| 13 | + background: #fcf; | |
| 14 | +} | |
| 15 | +.custom-group { | |
| 16 | + background: #ffffff; | |
| 17 | + padding: 0; | |
| 18 | + border: 1px solid grey; | |
| 19 | + margin: 10px; | |
| 20 | + box-shadow: -2px 2px 8px grey; | |
| 21 | +} | |
| 22 | + | |
| 23 | +.page-other .el-input .el-input__inner, .el-textarea__inner { | |
| 24 | + border-radius: 0; | |
| 25 | +} | |
| 26 | +</style> | |
| 27 | + | |
| 28 | +<template> | |
| 29 | + <div class="page-other"> | |
| 30 | + <pre>{{ model }}</pre> | |
| 31 | + <eg-table v-model="tableData" :list="option.list" :tableProps="{ border: true }" editable | |
| 32 | + @cell-edit="onCellEdit" @row-new="onRowNew" @row-edit="onRowEdit" @row-delete="onRowDelete" | |
| 33 | + > | |
| 34 | + <template #value-location-locationMin="{ value }"> | |
| 35 | + <el-tag v-if="value" size="mini" disable-transitions>{{ value }}</el-tag> | |
| 36 | + </template> | |
| 37 | + <template #value-location-district-province="{ value }"> | |
| 38 | + <el-tag v-if="value" type="success" size="mini" disable-transitions>{{ value }}</el-tag> | |
| 39 | + </template> | |
| 40 | + <!-- <template #location-district-city> | |
| 41 | + <el-table-column label="城市测试" prop="location-district-city"> | |
| 42 | + <el-tag type="danger" size="mini" slot-scope="{ row: { location: { district: { city } = {} } = {} } }">{{ city }}</el-tag> | |
| 43 | + </el-table-column> | |
| 44 | + </template> --> | |
| 45 | + </eg-table> | |
| 46 | + <el-button size="mini" @click="handleGetValue">校验</el-button> | |
| 47 | + <!-- <eg-form ref="form" v-model="model" :list="option.list" @validate="onValidate" label-width="80px" :span="6" type="div"></eg-form> --> | |
| 48 | + <eg-form | |
| 49 | + ref="form" v-model="model" :list="option.list" @validate="onValidate" :span="6" label-width="90px" | |
| 50 | + group-class="custom-group" :just-a-text-props="() => 'test'" | |
| 51 | + form-class="custom-form" title-class="custom-title" content-class="custom-content" item-class="custom-item" | |
| 52 | + ></eg-form> | |
| 53 | + </div> | |
| 54 | +</template> | |
| 55 | + | |
| 56 | +<script> | |
| 57 | +import EgForm from './form-new'; | |
| 58 | +import EgTable from './table-new'; | |
| 59 | + | |
| 60 | +export default { | |
| 61 | + name: 'other', | |
| 62 | + components: { EgForm, EgTable }, | |
| 63 | + data() { | |
| 64 | + return { | |
| 65 | + tableData: [], | |
| 66 | + model: { | |
| 67 | + name: 'name', | |
| 68 | + location: { | |
| 69 | + areaName: 'hahhhahaa', | |
| 70 | + }, | |
| 71 | + }, | |
| 72 | + option: { | |
| 73 | + list: [ | |
| 74 | + { | |
| 75 | + group: { title: '基础信息', span: 12 }, | |
| 76 | + list: [ | |
| 77 | + { | |
| 78 | + type(h, { config }) { | |
| 79 | + return h( | |
| 80 | + 'el-tooltip', | |
| 81 | + { props: { content: '这里是提示', placement: 'top', effect: 'dark' } }, | |
| 82 | + [h('el-input', config)] | |
| 83 | + ) | |
| 84 | + }, | |
| 85 | + label: '名称', | |
| 86 | + key: 'name' | |
| 87 | + }, | |
| 88 | + { type: 'el-input-number', label: '年龄', key: 'age', | |
| 89 | + render(h, { row, value }) { | |
| 90 | + return h('el-tag', { props: { type: 'warning', size: 'mini' } }, [h('span', `${value}[${row.name}]`)]) | |
| 91 | + } | |
| 92 | + }, | |
| 93 | + ], | |
| 94 | + }, | |
| 95 | + { span: 12 }, | |
| 96 | + { | |
| 97 | + group: { title: '住址', key: 'location', span: 24 }, | |
| 98 | + list: [ | |
| 99 | + { type: 'el-input', label: '地址简称', key: 'locationMin' }, | |
| 100 | + { | |
| 101 | + group: { key: 'district' }, | |
| 102 | + list: [ | |
| 103 | + { type: 'eagle-select', label: '省', key: 'province', props: { dataSource: [{ label: '新疆', value: '新疆' }, { label: '四川', value: '四川' }] }, rules: [{ required: true, message: '请输入省', trigger: 'change' }], minWidth: 120 }, | |
| 104 | + // { type: 'el-input', label: '市', key: 'city', render: { type: 'el-tag', props: { type: 'danger', size: 'mini' } } }, | |
| 105 | + { type: 'eagle-select', label: '市', key: 'city', | |
| 106 | + props: { dataSource: [{ label: '上海', value: '上海' }, { label: '北京', value: '北京' }] }, | |
| 107 | + render: { | |
| 108 | + type: 'a', props: { href: 'https:///www.baidu.com/', target: '_blank' }, style: { color: 'red' }, | |
| 109 | + children({ row }) { | |
| 110 | + const { location: { district: { city } = {} } = {} } = row; | |
| 111 | + return city ? `${city}[城市]` : ''; | |
| 112 | + } | |
| 113 | + } | |
| 114 | + }, | |
| 115 | + ], | |
| 116 | + }, | |
| 117 | + { | |
| 118 | + group: { title: '小区信息' }, | |
| 119 | + list: [ | |
| 120 | + { type: 'el-input', label: '小区名', key: 'areaName' }, | |
| 121 | + { type: 'el-input', label: '门牌号', key: 'homeNum' }, | |
| 122 | + { | |
| 123 | + group: { title: 'A栋' }, | |
| 124 | + list: [ | |
| 125 | + { type: 'el-input-number', label: '人数', key: 'anumber', | |
| 126 | + props: { 'controls-position': 'right' }, | |
| 127 | + on: { | |
| 128 | + change(value) { | |
| 129 | + console.log(value); | |
| 130 | + } | |
| 131 | + } | |
| 132 | + }, | |
| 133 | + ], | |
| 134 | + }, | |
| 135 | + { | |
| 136 | + group: { title: 'B栋', key: 'bside' }, | |
| 137 | + list: [ | |
| 138 | + { type: 'el-input-number', label: '人数', key: 'bnumber', | |
| 139 | + on({ model, update }) { | |
| 140 | + return { | |
| 141 | + change(value) { | |
| 142 | + if (value === 18 && model.age === 18) { | |
| 143 | + console.log(model) | |
| 144 | + update({ 'location.areaName': 'hehe', name: 'aaa', 'text.0': 'abc', 'ttt.0': 'abc' }); | |
| 145 | + } | |
| 146 | + } | |
| 147 | + } | |
| 148 | + } | |
| 149 | + }, | |
| 150 | + ], | |
| 151 | + } | |
| 152 | + ], | |
| 153 | + } | |
| 154 | + ], | |
| 155 | + }, | |
| 156 | + { type: 'el-input', label: '身高', key: 'height', props: { type: 'textarea', min: 3 }, style: { width: '100%' }, span: 24 }, | |
| 157 | + { type: 'el-input', label: '体重', key: 'weight' }, | |
| 158 | + ] | |
| 159 | + } | |
| 160 | + } | |
| 161 | + }, | |
| 162 | + mounted() { | |
| 163 | + setTimeout(() => { | |
| 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]; | |
| 184 | + }, 1000); | |
| 185 | + }, | |
| 186 | + methods: { | |
| 187 | + onValidate(isValidated, model) { | |
| 188 | + console.log(isValidated, model); | |
| 189 | + }, | |
| 190 | + handleGetValue() { | |
| 191 | + this.$refs.form.validate(); | |
| 192 | + }, | |
| 193 | + onCellEdit(data) { | |
| 194 | + console.log('cell-edit', data); | |
| 195 | + }, | |
| 196 | + onRowNew(data) { | |
| 197 | + console.log('row-new', data); | |
| 198 | + }, | |
| 199 | + onRowEdit(data) { | |
| 200 | + console.log('row-edit', data); | |
| 201 | + }, | |
| 202 | + onRowDelete(data) { | |
| 203 | + console.log('row-delete', data); | |
| 204 | + } | |
| 205 | + } | |
| 206 | +} | |
| 207 | +</script> | ... | ... |
examples/views/page/other.vue
| 1 | 1 | <style> |
| 2 | -.custom-form { | |
| 3 | - background: #cfc; | |
| 2 | +.w-full { | |
| 3 | + width: 100%; | |
| 4 | 4 | } |
| 5 | -.custom-title { | |
| 6 | - background: #ccf; | |
| 7 | -} | |
| 8 | -.custom-content { | |
| 9 | - background: #fcc; | |
| 10 | - margin: 10px; | |
| 11 | -} | |
| 12 | -.custom-item { | |
| 13 | - background: #fcf; | |
| 14 | -} | |
| 15 | -.custom-group { | |
| 16 | - background: #ffffff; | |
| 17 | - padding: 0; | |
| 18 | - border: 1px solid grey; | |
| 19 | - margin: 10px; | |
| 20 | - box-shadow: -2px 2px 8px grey; | |
| 21 | -} | |
| 22 | - | |
| 23 | 5 | .page-other .el-input .el-input__inner, .el-textarea__inner { |
| 24 | 6 | border-radius: 0; |
| 25 | 7 | } |
| ... | ... | @@ -27,39 +9,18 @@ |
| 27 | 9 | |
| 28 | 10 | <template> |
| 29 | 11 | <div class="page-other"> |
| 30 | - <pre>{{ model }}</pre> | |
| 31 | - <eg-table v-model="tableData" :list="option.list" :tableProps="{ border: true }" editable | |
| 32 | - @cell-edit="onCellEdit" @row-new="onRowNew" @row-edit="onRowEdit" @row-delete="onRowDelete" | |
| 33 | - > | |
| 34 | - <template #value-location-locationMin="{ value }"> | |
| 35 | - <el-tag v-if="value" size="mini" disable-transitions>{{ value }}</el-tag> | |
| 36 | - </template> | |
| 37 | - <template #value-location-district-province="{ value }"> | |
| 38 | - <el-tag v-if="value" type="success" size="mini" disable-transitions>{{ value }}</el-tag> | |
| 39 | - </template> | |
| 40 | - <!-- <template #location-district-city> | |
| 41 | - <el-table-column label="城市测试" prop="location-district-city"> | |
| 42 | - <el-tag type="danger" size="mini" slot-scope="{ row: { location: { district: { city } = {} } = {} } }">{{ city }}</el-tag> | |
| 43 | - </el-table-column> | |
| 44 | - </template> --> | |
| 45 | - </eg-table> | |
| 46 | - <el-button size="mini" @click="handleGetValue">校验</el-button> | |
| 47 | - <!-- <eg-form ref="form" v-model="model" :list="option.list" @validate="onValidate" label-width="80px" :span="6" type="div"></eg-form> --> | |
| 48 | - <eg-form | |
| 49 | - ref="form" v-model="model" :list="option.list" @validate="onValidate" :span="4" | |
| 50 | - group-class="custom-group" :just-a-text-props="() => 'test'" | |
| 51 | - form-class="custom-form" title-class="custom-title" content-class="custom-content" item-class="custom-item" | |
| 52 | - ></eg-form> | |
| 12 | + <eg-form-table :list="list"></eg-form-table> | |
| 53 | 13 | </div> |
| 54 | 14 | </template> |
| 55 | 15 | |
| 56 | 16 | <script> |
| 57 | 17 | import EgForm from './form-new'; |
| 18 | +import EgFormTable from './form-table'; | |
| 58 | 19 | import EgTable from './table-new'; |
| 59 | 20 | |
| 60 | 21 | export default { |
| 61 | 22 | name: 'other', |
| 62 | - components: { EgForm, EgTable }, | |
| 23 | + components: { EgForm, EgFormTable, EgTable }, | |
| 63 | 24 | data() { |
| 64 | 25 | return { |
| 65 | 26 | tableData: [], |
| ... | ... | @@ -69,6 +30,26 @@ export default { |
| 69 | 30 | areaName: 'hahhhahaa', |
| 70 | 31 | }, |
| 71 | 32 | }, |
| 33 | + list: [ | |
| 34 | + [ | |
| 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' }, | |
| 40 | + ], | |
| 41 | + [ | |
| 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 }, | |
| 45 | + ], | |
| 46 | + [ | |
| 47 | + { type: 'el-input', label: '名称1', key: 'name1', colspan: 4 }, | |
| 48 | + { type: 'el-input-number', label: '年龄1', key: 'age1' }, | |
| 49 | + ], | |
| 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 } }], | |
| 52 | + ], | |
| 72 | 53 | option: { |
| 73 | 54 | list: [ |
| 74 | 55 | { | ... | ... |