表单样式提交
Showing
2 changed files
with
92 additions
and
20 deletions
... | @@ -4,6 +4,10 @@ | ... | @@ -4,6 +4,10 @@ |
4 | //margin-top: 10px; | 4 | //margin-top: 10px; |
5 | float: left; | 5 | float: left; |
6 | 6 | ||
7 | .el-input{ | ||
8 | width: 100%; | ||
9 | } | ||
10 | |||
7 | .content-left{ | 11 | .content-left{ |
8 | width: 40%; | 12 | width: 40%; |
9 | float: left; | 13 | float: left; |
... | @@ -36,10 +40,6 @@ | ... | @@ -36,10 +40,6 @@ |
36 | font-size: xx-large | 40 | font-size: xx-large |
37 | } | 41 | } |
38 | 42 | ||
39 | .el-input{ | ||
40 | width: 300px; | ||
41 | } | ||
42 | |||
43 | .el-col{ | 43 | .el-col{ |
44 | border-right: 1px solid grey; | 44 | border-right: 1px solid grey; |
45 | height: 45px; | 45 | height: 45px; | ... | ... |
... | @@ -3,6 +3,20 @@ | ... | @@ -3,6 +3,20 @@ |
3 | <el-form ref="form" :model="form" label-width="160px"> | 3 | <el-form ref="form" :model="form" label-width="160px"> |
4 | <table border="1" width="100%" cellspacing="1" cellpadding="2"> | 4 | <table border="1" width="100%" cellspacing="1" cellpadding="2"> |
5 | <tbody> | 5 | <tbody> |
6 | <tr> | ||
7 | <td colspan="1" style="width:8.33%"></td> | ||
8 | <td colspan="1" style="width:8.33%"></td> | ||
9 | <td colspan="1" style="width:8.33%"></td> | ||
10 | <td colspan="1" style="width:8.33%"></td> | ||
11 | <td colspan="1" style="width:8.33%"></td> | ||
12 | <td colspan="1" style="width:8.33%"></td> | ||
13 | <td colspan="1" style="width:8.33%"></td> | ||
14 | <td colspan="1" style="width:8.33%"></td> | ||
15 | <td colspan="1" style="width:8.33%"></td> | ||
16 | <td colspan="1" style="width:8.33%"></td> | ||
17 | <td colspan="1" style="width:8.33%"></td> | ||
18 | <td colspan="1" style="width:8.33%"></td> | ||
19 | </tr> | ||
6 | <tr height="30"> | 20 | <tr height="30"> |
7 | <td colspan="12" align="center" bgcolor="#F1F4FC" style="width:8.33%"><font size="5">自然幢基本信息</font></td> | 21 | <td colspan="12" align="center" bgcolor="#F1F4FC" style="width:8.33%"><font size="5">自然幢基本信息</font></td> |
8 | </tr> | 22 | </tr> |
... | @@ -13,8 +27,8 @@ | ... | @@ -13,8 +27,8 @@ |
13 | </td> | 27 | </td> |
14 | <td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">自然幢号</td> | 28 | <td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">自然幢号</td> |
15 | <td colspan="4" bgcolor="#F1F4FC" style="width:8.33%"> | 29 | <td colspan="4" bgcolor="#F1F4FC" style="width:8.33%"> |
16 | <el-input v-model="form.name" style="width: 200px"></el-input> | 30 | <el-input v-model="form.name" style="width: 70%"></el-input> |
17 | <el-button @click.prevent="" type="primary" style="width:90px;margin-left:10px">生成</el-button> | 31 | <el-button @click.prevent="" type="primary" style="width:25%;margin-left:3%">生成</el-button> |
18 | </td> | 32 | </td> |
19 | </tr> | 33 | </tr> |
20 | <tr height="30"> | 34 | <tr height="30"> |
... | @@ -24,8 +38,8 @@ | ... | @@ -24,8 +38,8 @@ |
24 | </td> | 38 | </td> |
25 | <td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">不动产单元号</td> | 39 | <td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">不动产单元号</td> |
26 | <td colspan="4" bgcolor="#F1F4FC" style="width:8.33%"> | 40 | <td colspan="4" bgcolor="#F1F4FC" style="width:8.33%"> |
27 | <el-input v-model="form.name" style="width: 200px"></el-input> | 41 | <el-input v-model="form.name" style="width: 70%"></el-input> |
28 | <el-button @click.prevent="" type="primary" style="width:90px;margin-left:10px">生成</el-button> | 42 | <el-button @click.prevent="" type="primary" style="width:25%;margin-left:3%">生成</el-button> |
29 | </td> | 43 | </td> |
30 | </tr> | 44 | </tr> |
31 | 45 | ||
... | @@ -43,11 +57,22 @@ | ... | @@ -43,11 +57,22 @@ |
43 | <tr height="30"> | 57 | <tr height="30"> |
44 | <td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">房屋性质</td> | 58 | <td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">房屋性质</td> |
45 | <td colspan="4" bgcolor="#F1F4FC" style="width:8.33%"> | 59 | <td colspan="4" bgcolor="#F1F4FC" style="width:8.33%"> |
46 | <el-input v-model="form.name"></el-input> | 60 | <el-select v-model="value" placeholder="请选择" style="display:block;"> |
61 | <el-option | ||
62 | v-for="item in options" | ||
63 | :key="item.value" | ||
64 | :label="item.label" | ||
65 | :value="item.value"> | ||
66 | </el-option> | ||
67 | </el-select> | ||
47 | </td> | 68 | </td> |
48 | <td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">竣工日期</td> | 69 | <td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%">竣工日期</td> |
49 | <td colspan="4" bgcolor="#F1F4FC" style="width:8.33%"> | 70 | <td colspan="4" bgcolor="#F1F4FC" style="width:8.33%"> |
50 | <el-input v-model="form.name"></el-input> | 71 | <el-date-picker |
72 | v-model="form.date" | ||
73 | type="date" | ||
74 | placeholder="选择日期"> | ||
75 | </el-date-picker> | ||
51 | </td> | 76 | </td> |
52 | </tr> | 77 | </tr> |
53 | 78 | ||
... | @@ -135,11 +160,25 @@ | ... | @@ -135,11 +160,25 @@ |
135 | </td> | 160 | </td> |
136 | <td width="30" colspan="1" align="center" bgcolor="#F1F4FC" style="width:8.33%">规划用途</td> | 161 | <td width="30" colspan="1" align="center" bgcolor="#F1F4FC" style="width:8.33%">规划用途</td> |
137 | <td width="30" colspan="4" align="center" bgcolor="#F1F4FC" style="width:8.33%"> | 162 | <td width="30" colspan="4" align="center" bgcolor="#F1F4FC" style="width:8.33%"> |
138 | <el-input v-model="form.name"></el-input> | 163 | <el-select v-model="value" placeholder="请选择" style="display:block;"> |
164 | <el-option | ||
165 | v-for="item in options" | ||
166 | :key="item.value" | ||
167 | :label="item.label" | ||
168 | :value="item.value"> | ||
169 | </el-option> | ||
170 | </el-select> | ||
139 | </td> | 171 | </td> |
140 | <td width="30" colspan="1" align="center" bgcolor="#F1F4FC" style="width:8.33%">用途</td> | 172 | <td width="30" colspan="1" align="center" bgcolor="#F1F4FC" style="width:8.33%">用途</td> |
141 | <td width="30" colspan="4" align="center" bgcolor="#F1F4FC" style="width:8.33%"> | 173 | <td width="30" colspan="4" align="center" bgcolor="#F1F4FC" style="width:8.33%"> |
142 | <el-input v-model="form.name"></el-input> | 174 | <el-select v-model="value" placeholder="请选择" style="display:block;"> |
175 | <el-option | ||
176 | v-for="item in options" | ||
177 | :key="item.value" | ||
178 | :label="item.label" | ||
179 | :value="item.value"> | ||
180 | </el-option> | ||
181 | </el-select> | ||
143 | </td> | 182 | </td> |
144 | </tr> | 183 | </tr> |
145 | 184 | ||
... | @@ -163,16 +202,18 @@ | ... | @@ -163,16 +202,18 @@ |
163 | </tr> | 202 | </tr> |
164 | 203 | ||
165 | <tr height="30"> | 204 | <tr height="30"> |
166 | <td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%"> | 205 | <td colspan="2" rowspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%"> |
167 | <span>附加说明</span> | 206 | <span>附加说明</span> |
168 | </td> | 207 | </td> |
169 | <td colspan="10" bgcolor="#F1F4FC" style="width:8.33%"> | 208 | <td colspan="10" rowspan="2" bgcolor="#F1F4FC" style="width:8.33%"> |
170 | <el-input v-model="form.name"></el-input> | 209 | <el-input v-model="form.name" type="textarea"></el-input> |
171 | </td> | 210 | </td> |
172 | </tr> | 211 | </tr> |
212 | <tr height="30"> | ||
213 | </tr> | ||
173 | 214 | ||
174 | <tr height="30"> | 215 | <tr height="30"> |
175 | <td colspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%"> | 216 | <td colspan="2" rowspan="2" align="center" bgcolor="#F1F4FC" style="width:8.33%"> |
176 | <span>调查意见</span> | 217 | <span>调查意见</span> |
177 | </td> | 218 | </td> |
178 | <td colspan="10" bgcolor="#F1F4FC" style="width:8.33%"> | 219 | <td colspan="10" bgcolor="#F1F4FC" style="width:8.33%"> |
... | @@ -180,6 +221,22 @@ | ... | @@ -180,6 +221,22 @@ |
180 | </td> | 221 | </td> |
181 | </tr> | 222 | </tr> |
182 | 223 | ||
224 | <tr height="30"> | ||
225 | <td colspan="10" bgcolor="#F1F4FC" style="width:8.33%"> | ||
226 | <el-form-item label="审查员" style="margin-left:30%;float: left"> | ||
227 | <el-input v-model="form.name" style="width: 100%"></el-input> | ||
228 | </el-form-item> | ||
229 | <el-form-item label="审查日期" style="margin-left: 70%"> | ||
230 | <el-date-picker | ||
231 | v-model="form.date" | ||
232 | type="date" | ||
233 | style="width: 100%" | ||
234 | placeholder="选择日期"> | ||
235 | </el-date-picker> | ||
236 | </el-form-item> | ||
237 | </td> | ||
238 | </tr> | ||
239 | |||
183 | </tbody> | 240 | </tbody> |
184 | </table> | 241 | </table> |
185 | </el-form> | 242 | </el-form> |
... | @@ -193,10 +250,25 @@ | ... | @@ -193,10 +250,25 @@ |
193 | return { | 250 | return { |
194 | form:{ | 251 | form:{ |
195 | name:'', | 252 | name:'', |
253 | date:'', | ||
196 | }, | 254 | }, |
197 | form1:{ | 255 | options: [{ |
198 | name:'', | 256 | value: '选项1', |
199 | } | 257 | label: '黄金糕' |
258 | }, { | ||
259 | value: '选项2', | ||
260 | label: '双皮奶' | ||
261 | }, { | ||
262 | value: '选项3', | ||
263 | label: '蚵仔煎' | ||
264 | }, { | ||
265 | value: '选项4', | ||
266 | label: '龙须面' | ||
267 | }, { | ||
268 | value: '选项5', | ||
269 | label: '北京烤鸭' | ||
270 | }], | ||
271 | value: '', | ||
200 | } | 272 | } |
201 | }, | 273 | }, |
202 | methods: { | 274 | methods: { |
... | @@ -204,5 +276,5 @@ | ... | @@ -204,5 +276,5 @@ |
204 | } | 276 | } |
205 | </script> | 277 | </script> |
206 | <style rel="stylesheet/less" lang="less"> | 278 | <style rel="stylesheet/less" lang="less"> |
207 | /*@import './index.less';*/ | 279 | @import './index.less'; |
208 | </style> | 280 | </style> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or sign in to post a comment