程式碼地址：https://github.com/littleOneYuan/select-tag-Component

詳情：通過選擇器選擇可以在下方區域用對應的標籤進行展示，重複選擇相同標籤即為刪除

框架：element-ui

HTML 程式碼

 1 <template>
 2   <div class="drawerContainer">
 3     <el-form
 4       ref="drawerForm"
 5       :model="drawerForm"
 6       :rules="rules"
 7     >
 8       <
 
el-form-item prop="gameIds">
 9         <span>子游戲名：</span>
10         <el-select
11           v-model="drawerForm.gameIds"
12           multiple // 可多選
13           collapse-tags // 帶標籤
14           filterable // 可搜尋
15           clearable // 可清空
16           @clear="clearDo" // 清空事件
17           @change
 
="chooseGame" // 選項改變事件
18           placeholder="請選擇"
19         >
20           <el-option
21             v-for="item in belongDeptOptions"
22             :key="item.gameId"
23             :label="item.gameName"
24             :value="item.gameId"
25           >
26           </el-option>
 

27         </el-select>
28       </el-form-item>
29     </el-form>
30     <el-tag
31       v-for="tag in tags"
32       :key="tag.gameName"
33       size="medium"
34       effect="plain"
35       closable
36       :disable-transitions="false"
37       @close="tagClose(tag)" // 標籤關閉事件
38     >
39       {{tag.gameName}}
40     </el-tag>
41   </div>
42 </template>

Script 程式碼

 1 <script>
 2 export default {
 3   data () {
 4     return {
 5       drawerForm: {
 6         gameIds: []
 7       },
 8       tags: [],
 9       belongDeptOptions: [{ // 所屬部門
10         gameId: '...',
11         gameName: '..'
12       },...]
13     }
14   },
15   methods: {
16     // 選擇器選中動態新增標籤
17     chooseGame () {
18       if (this.drawerForm.gameIds.length !== 0) {
19         // 臨時物件儲存選項
20         let temp = {}
21         temp.gameId = this.drawerForm.gameIds[this.drawerForm.gameIds.length - 1]
22         this.belongDeptOptions.forEach(item => {
23           if (item.gameId === temp.gameId) temp.gameName = item.gameName
24         })
25         // 選擇相同標籤等於刪除該標籤
26         var tFlag = true // 標記是否在已有標籤中存在新增標籤，若存在，則不新增而是刪除
27         for (let i = 0; i < this.tags.length; i++) {
28           if (this.tags[i].gameId === temp.gameId) {
29             tFlag = false
30             this.tags.splice(i === this.tags.length - 1 ? 0 : i + 1, 1) // 這裡的i+1具體也不是很清楚...本意是取index但是實際取到的是index-1所以就+1了，然後index=0的時候實際是this.tags.length - 1
31           }
32         }
33         // 未重複且非空標籤才push
34         if (tFlag && !temp.gamaId) this.tags.push(temp)
35       } else { // 未選擇任何一項時直接賦空值
36         this.tags = []
37       }
38     },
39     // 清空標籤
40     clearDo () {
41       this.tags = []
42     },
43     // 標籤關閉
44     tagClose (tag) {
45       this.tags.splice(this.tags.indexOf(tag), 1)
46       this.drawerForm.gameIds.splice(this.drawerForm.gameIds.indexOf(tag.gameId), 1)
47     }
48   }
49 }
50 </script>