framework / eagle-web-toolkit

Download as
Browse Code »

Commit 8a627c74270c1d398565510de430d4c239e7ddf1

Authored by Aaron
1 parent 6d1228a6
Exists in master and in 1 other branch legacy

修改表格表单数据绑定及示例

Showing 2 changed files with 114 additions and 44 deletions   Show diff stats
examples/views/page/form-table/index.vue
  Diff comments   View file @8a627c7
... ... @@ -6,11 +6,18 @@
6 6 text-align: right !important;
7 7 padding: 5px 15px !important;
8 8 font-weight: bold;
9   - background-color: #ecf7ff;
  9 + background-color: #F5F7FA;
10 10 }
11 11 .eagle-form-table__value {
12 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 21 </style>
15 22  
16 23 <template>
... ... @@ -34,39 +41,67 @@
34 41 <tr v-for="(item, index) in fullProps.list" :key="index" class="el-table__row">
35 42 <template v-if="(item instanceof Array)">
36 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 47 </td>
41 48 </template>
42 49 </template>
43 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 54 </td>
48 55 </template>
49 56 </tr>
50 57 </tbody>
51 58 </table>
52 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 71 </div>
54 72 </template>
55 73  
56 74 <script>
57 75 export default {
58 76 name: 'form-table',
  77 + props: {
  78 + value: Object,
  79 + list: Array,
  80 + title: String
  81 + },
59 82 data() {
60 83 return {
  84 + model: this.value || {},
61 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 100 computed: {
66 101 // 配置列表中的最大列数
67 102 maxColNum() {
68 103 let number = 1;
69   - this.fullProps.list.forEach(item => {
  104 + this.list.forEach(item => {
70 105 if (item instanceof Array) {
71 106 if (item.length > number) {
72 107 number = item.length;
... ... @@ -88,7 +123,23 @@ export default {
88 123 return col.colspan || normalColSpan;
89 124 }
90 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 145 </script>
... ...
examples/views/page/other.vue
  Diff comments   View file @8a627c7
... ... @@ -9,7 +9,8 @@
9 9  
10 10 <template>
11 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 14 </div>
14 15 </template>
15 16  
... ... @@ -26,29 +27,32 @@ export default {
26 27 tableData: [],
27 28 model: {
28 29 name: 'name',
29   - location: {
30   - areaName: 'hahhhahaa',
31   - },
  30 + // location: {
  31 + // areaName: 'hahhhahaa',
  32 + // },
32 33 },
33 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 57 option: {
54 58 list: [
... ... @@ -143,25 +147,40 @@ export default {
143 147 mounted() {
144 148 setTimeout(() => {
145 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 184 }, 1000);
166 185 },
167 186 methods: {
... ...