表单样式提交
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