优化基础表单

src/components/page/BaseForm.vue

@@ -25,11 +25,14 @@
                         </el-col>
                         <el-col class="line" :span="2">-</el-col>
                         <el-col :span="11">
-                            <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
+                            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                         </el-col>
                     </el-form-item>
+                    <el-form-item label="城市级联">
+                        <el-cascader :options="options" v-model="form.options"></el-cascader>
+                    </el-form-item>
                     <el-form-item label="选择开关">
-                        <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
+                        <el-switch v-model="form.delivery"></el-switch>
                     </el-form-item>
                     <el-form-item label="多选框">
                         <el-checkbox-group v-model="form.type">
@@ -46,10 +49,10 @@
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item label="文本框">
-                        <el-input type="textarea" v-model="form.desc"></el-input>
+                        <el-input type="textarea" rows="5" v-model="form.desc"></el-input>
                     </el-form-item>
                     <el-form-item>
-                        <el-button type="primary" @click="onSubmit">提交</el-button>
+                        <el-button type="primary" @click="onSubmit">表单提交</el-button>
                         <el-button>取消</el-button>
                     </el-form-item>
                 </el-form>
@@ -63,6 +66,58 @@
     export default {
         data: function(){
             return {
+                options:[
+                    {
+                        value: 'guangdong',
+                        label: '广东省',
+                        children: [
+                            {
+                                value: 'guangzhou',
+                                label: '广州市',
+                                children: [
+                                    {
+                                        value: 'tianhe',
+                                        label: '天河区'
+                                    },
+                                    {
+                                        value: 'haizhu',
+                                        label: '海珠区'
+                                    }
+                                ]
+                            },
+                            {
+                                value: 'dongguan',
+                                label: '东莞市',
+                                children: [
+                                    {
+                                        value: 'changan',
+                                        label: '长安镇'
+                                    },
+                                    {
+                                        value: 'humen',
+                                        label: '虎门镇'
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        value: 'hunan',
+                        label: '湖南省',
+                        children: [
+                            {
+                                value: 'changsha',
+                                label: '长沙市',
+                                children: [
+                                    {
+                                        value: 'yuelu',
+                                        label: '岳麓区'
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ],
                 form: {
                     name: '',
                     region: '',
@@ -71,7 +126,8 @@
                     delivery: true,
                     type: ['步步高'],
                     resource: '小天才',
-                    desc: ''
+                    desc: '',
+                    options: []
                 }
             }
         },

static/css/main.css

@@ -64,6 +64,9 @@ a{text-decoration: none}
 .el-time-panel__content::after, .el-time-panel__content::before {
     margin-top: -7px;
 }
+.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default){
+    padding-bottom: 0;
+}
 /*Readme*/
 .ms-doc .el-checkbox__input.is-disabled+.el-checkbox__label{
     color: #333;