SELECT组件学习2

src/App.vue

@@ -4,7 +4,12 @@
     <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>
+    <router-link :to="{name:'form5'}">Form Demo 5: Select组件01-组件大小</router-link><br>
+    <router-link :to="{name:'form6'}">Form Demo 6: Select组件02-禁用状态</router-link><br>
+    <router-link :to="{name:'form7'}">Form Demo 7: Select组件03-多选</router-link><br>
+    <router-link :to="{name:'form8'}">Form Demo 8: Select组件04-自定义模板</router-link><br>
+    <router-link :to="{name:'form9'}">Form Demo 9: Select组件05-筛选</router-link><br>
+    <router-link :to="{name:'form10'}">Form Demo 10: Select组件06-分组</router-link><br>
   </div>
   <hr>
   <div>

src/router/index.js

@@ -7,6 +7,11 @@ 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')
+const formDemo6 = () => import('../views/Form_Demo6.vue')
+const formDemo7 = () => import('../views/Form_Demo7.vue')
+const formDemo8 = () => import('../views/Form_Demo8.vue')
+const formDemo9 = () => import('../views/Form_Demo9.vue')
+const formDemo10 = () => import('../views/Form_Demo10.vue')
 
 
 // 引入组件
@@ -39,6 +44,31 @@ const routes = [
         name: 'form5',
         component: formDemo5
     },
+    {
+        path: '/form6',
+        name: 'form6',
+        component: formDemo6
+    },
+    {
+        path: '/form7',
+        name: 'form7',
+        component: formDemo7
+    },
+    {
+        path: '/form8',
+        name: 'form8',
+        component: formDemo8
+    },
+    {
+        path: '/form9',
+        name: 'form9',
+        component: formDemo9
+    },
+    {
+        path: '/form10',
+        name: 'form10',
+        component: formDemo10
+    },
 ]
 
 // 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes

src/views/Form_Demo10.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-select v-model="value" placeholder="请选择">
+    <el-option-group
+        v-for="group in options"
+        :label="group.label"
+        :key="group.label"
+    >
+      <el-option
+          v-for="item in group.options"
+          :value="item.value"
+          :key="item.value"
+          :label="item.label"
+      >
+      </el-option>
+    </el-option-group>
+  </el-select>
+
+</template>
+
+<script>
+export default {
+  name: "Form_Demo10",
+  data() {
+    return {
+      value: "",
+      options: [
+        {
+          label: 'Popular cities',
+          options: [
+            {
+              value: 'Shanghai',
+              label: 'Shanghai',
+            },
+            {
+              value: 'Beijing',
+              label: 'Beijing',
+            },
+          ],
+        },
+        {
+          label: 'City name',
+          options: [
+            {
+              value: 'Chengdu',
+              label: 'Chengdu',
+            },
+            {
+              value: 'Shenzhen',
+              label: 'Shenzhen',
+            },
+            {
+              value: 'Guangzhou',
+              label: 'Guangzhou',
+            },
+            {
+              value: 'Dalian',
+              label: 'Dalian',
+            },
+          ],
+        },
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Form_Demo5.vue

@@ -1,5 +1,21 @@
 <template>
-  <el-select v-model="value" placeholder="请选择" size="large">
+  <el-select v-model="value" placeholder="请选择-large" size="large">
+    <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+    </el-option>
+  </el-select>
+  <el-select v-model="value" clearable placeholder="请选择-可清除">
+    <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+    </el-option>
+  </el-select>
+  <el-select v-model="value" placeholder="请选择-small" size="small">
     <el-option
         v-for="item in options"
         :key="item.value"

src/views/Form_Demo6.vue

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

src/views/Form_Demo7.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <el-select v-model="value1" multiple clearable placeholder="clearable">
+      <el-option
+          v-for="item in options"
+          :value="item.value"
+          :label="item.label"
+          :key="item.value">
+      </el-option>
+    </el-select>
+  </div>
+  <div>
+    <el-select v-model="value2" multiple collapse-tags placeholder="collapse-tags">
+      <el-option
+          v-for="item in options"
+          :value="item.value"
+          :label="item.label"
+          :key="item.key">
+      </el-option>
+    </el-select>
+  </div>
+  <div>
+    <el-select v-model="value3" multiple collapse-tags collapse-tags-tooltip placeholder="collapse-tags-tooltip">
+      <el-option
+          v-for="item in options"
+          :value="item.value"
+          :label="item.label"
+          :key="item.key">
+      </el-option>
+    </el-select>
+  </div>
+  <div>
+    <el-select v-model="value4" multiple collapse-tags max-collapse-tags="3" placeholder="max-collapse-tags">
+      <el-option
+          v-for="item in options"
+          :value="item.value"
+          :label="item.label"
+          :key="item.key">
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Form_Demo7",
+  data() {
+    return {
+      value1: '',
+      value2: '',
+      value3: '',
+      value4: '',
+      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>

src/views/Form_Demo8.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-select v-model="value">
+    <el-option
+        v-for="item in city"
+        :value="item.value"
+        :label="item.label"
+        :key="item.value"
+    >
+      <span style="float: left">{{item.label}}</span>
+      <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px;">{{item.value}}</span>
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: "Form_Demo8",
+  data() {
+    return {
+      value: "Beijing",
+      city: [
+        {
+          value: "Beijing",
+          label: "北京"
+        }, {
+          value: "Shanghai",
+          label: "上海"
+        }, {
+          value: "Nanjing",
+          label: "南京"
+        }, {
+          value: "Chengdu",
+          label: "成都"
+        }, {
+          value: "Shenzhen",
+          label: "深圳"
+        }, {
+          value: "Guangzhou",
+          label: "广州"
+        },
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Form_Demo9.vue

@@ -0,0 +1,47 @@
+<template>
+  <el-select v-model="value" filterable placeholder="filterable">
+    <el-option
+        v-for="item in options"
+        :value="item.value"
+        :label="item.label"
+        :key="item.value"
+    ></el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: "Form_Demo9",
+  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>