From 1b0e4bf719a2f158d1278fcdcfe0f2e61fcb3185 Mon Sep 17 00:00:00 2001
From: RogerWork <roger.x.sun@qq.com>
Date: Mon, 16 Oct 2023 17:59:46 +0800
Subject: [PATCH] =?UTF-8?q?SELECT=E7=BB=84=E4=BB=B6=E5=AD=A6=E4=B9=A01?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue              |  1 +
 src/router/index.js      |  6 +++++
 src/views/Form_Demo4.vue |  1 -
 src/views/Form_Demo5.vue | 47 ++++++++++++++++++++++++++++++++++++++++
 4 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Form_Demo5.vue

diff --git a/src/App.vue b/src/App.vue
index 88dae45..14c78cf 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/router/index.js b/src/router/index.js
index 2ed1716..af5825a 100644
--- a/src/router/index.js
+++ b/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
diff --git a/src/views/Form_Demo4.vue b/src/views/Form_Demo4.vue
index 4f73216..0c41598 100644
--- a/src/views/Form_Demo4.vue
+++ b/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;
diff --git a/src/views/Form_Demo5.vue b/src/views/Form_Demo5.vue
new file mode 100644
index 0000000..3b32ce6
--- /dev/null
+++ b/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>
\ No newline at end of file