SELECT组件学习1

src/App.vue

@@ -4,6 +4,7 @@
     <router-link :to="{name:'form2'}">Form Demo 2: 行内表单</router-link><br>
     <router-link :to="{name:'form3'}">Form Demo 3: 表单验证</router-link><br>
     <router-link :to="{name:'form4'}">Form Demo 4: 动态表单</router-link><br>
+    <router-link :to="{name:'form5'}">Form Demo 5: Select组件</router-link><br>
   </div>
   <hr>
   <div>

src/router/index.js

@@ -6,6 +6,7 @@ const formDemo1 = () => import('../views/Form_Demo1.vue')
 const formDemo2 = () => import('../views/Form_Demo2.vue')
 const formDemo3 = () => import('../views/Form_Demo3.vue')
 const formDemo4 = () => import('../views/Form_Demo4.vue')
+const formDemo5 = () => import('../views/Form_Demo5.vue')
 
 
 // 引入组件
@@ -33,6 +34,11 @@ const routes = [
         name: 'form4',
         component: formDemo4
     },
+    {
+        path: '/form5',
+        name: 'form5',
+        component: formDemo5
+    },
 ]
 
 // 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes

src/views/Form_Demo4.vue

@@ -89,7 +89,6 @@ export default {
 }
 .domain-item {
   margin-bottom: 15px!important;
-  display: inline-block;
 }
 .ml-10 {
   margin-left: 10px;

src/views/Form_Demo5.vue

@@ -0,0 +1,47 @@
+<template>
+  <el-select v-model="value" placeholder="请选择" size="large">
+    <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: "From_Demo5",
+  data() {
+    return {
+      value: '',
+      options: [
+        {
+          value: 'Option1',
+          label: '选项1',
+        },
+        {
+          value: 'Option2',
+          label: '选项2',
+        },
+        {
+          value: 'Option3',
+          label: '选项3',
+        },
+        {
+          value: 'Option4',
+          label: '选项4',
+        },
+        {
+          value: 'Option5',
+          label: '选项5',
+        }
+      ]
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>