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 @@ | @@ -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 @@ | @@ -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 | <style> | 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 | .page-other .el-input .el-input__inner, .el-textarea__inner { | 5 | .page-other .el-input .el-input__inner, .el-textarea__inner { |
| 24 | border-radius: 0; | 6 | border-radius: 0; |
| 25 | } | 7 | } |
| @@ -27,39 +9,18 @@ | @@ -27,39 +9,18 @@ | ||
| 27 | 9 | ||
| 28 | <template> | 10 | <template> |
| 29 | <div class="page-other"> | 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 | </div> | 13 | </div> |
| 54 | </template> | 14 | </template> |
| 55 | 15 | ||
| 56 | <script> | 16 | <script> |
| 57 | import EgForm from './form-new'; | 17 | import EgForm from './form-new'; |
| 18 | +import EgFormTable from './form-table'; | ||
| 58 | import EgTable from './table-new'; | 19 | import EgTable from './table-new'; |
| 59 | 20 | ||
| 60 | export default { | 21 | export default { |
| 61 | name: 'other', | 22 | name: 'other', |
| 62 | - components: { EgForm, EgTable }, | 23 | + components: { EgForm, EgFormTable, EgTable }, |
| 63 | data() { | 24 | data() { |
| 64 | return { | 25 | return { |
| 65 | tableData: [], | 26 | tableData: [], |
| @@ -69,6 +30,26 @@ export default { | @@ -69,6 +30,26 @@ export default { | ||
| 69 | areaName: 'hahhhahaa', | 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 | option: { | 53 | option: { |
| 73 | list: [ | 54 | list: [ |
| 74 | { | 55 | { |