溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下Vue怎么實現多標簽選擇器，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
實現效果
實現代碼
<html lang="en"> <head> <title>Document</title> <!-- 引入本地組件庫 --> <link rel="stylesheet" href="static/element-ui/index.css" > <script src="static/element-ui/vue.js"></script> <script src="static/element-ui/index.js"></script> <!-- 引入CDN樣式 --> <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" > --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --> <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> --> <style> .not-active { display: inline-block; font-size: 12px; margin: 5px 8px; } span { margin: 0 2px; } </style> </head> <body> <div id="app"> <!-- 待選標簽 --> <div v-for='(category, categoryIndex) in categories' :key="category.id"> <!-- 分類 --> <span class="not-active">{{category.name}}：</span> <template> <span v-if="category.count"class="not-active" @click="clearCategory(category, categoryIndex)"> 不限</span> <my-tag v-else>不限</my-tag> </template> <!-- 標簽 --> <template v-for='(child, childIndex) in category.children'> <my-tag v-if="child.active" :closable='true' @click-child='clickChild(category, categoryIndex, child, childIndex)'> {{ child.name }} </my-tag> <span v-else class="not-active" @click='clickChild(category, categoryIndex, child, childIndex)'>{{ child.name }}</span> </template> </div> <!-- 已選標簽 --> <div v-if='conditions.length'> <span class="not-active" @click="clearCondition">清空已選：<span> <el-tag v-for='(condition, index) in conditions' :key="condition.id" type="primary" :closable="true" size="small" :disable-transitions="true" @close='removeCondition(condition, index)' @click='removeCondition(condition, index)'> {{condition.name}} </el-tag> </div> </div> <script src="./data.js"></script> <script> // 簡單封裝一個公用組件 Vue.component('my-tag', { template: "<el-tag v-bind='$attrs' v-on='$listeners' effect='dark' size='small' :disable-transitions='true' @click='clickChild' @close='clickChild'><slot></slot></el-tag>", methods: { clickChild() { this.$emit("click-child") } } }); var app = new Vue({ el: '#app', data() { return { categories, // 分類標簽，可從外部加載配置 conditions: [] // 已選條件 } }, watch: { // 監聽條件變化，按照請求接口拼裝請求參數 conditions(val){ let selectedCondition = {}; for(let categorie of this.categories){ let selected_list = []; for(let child of categorie.children){ if(child.active){ selected_list.push(child.name); } } selectedCondition[categorie.name] = selected_list.join("|") } console.log(selectedCondition); } }, methods: { // 處理標簽點擊事件，未選中則選中，已選中則取消選中 clickChild(category, categoryIndex, child, childIndex) { let uid = `${categoryIndex}-${childIndex}` child.uid = uid; console.log(uid) // 取消選擇 if (child.active === true) { category.count--; child.active = false; this.conditions.forEach((conditionChild, index) => { if (conditionChild.uid === child.uid) { this.conditions.splice(index, 1); } }); // 選擇 } else { category.count++; child.active = true; this.conditions.push(child); } }, // 清除已選整個類別標簽 clearCategory(category, categoryIndex) { category.count = 0; // 可選列表均為未選中狀態 category.children.forEach(child => { child.active = false; }) // 清空該類已選元素 for (let index = this.conditions.length - 1; index >= 0; index--) { const conditionChild = this.conditions[index]; if (conditionChild.uid.startsWith(categoryIndex)) { this.conditions.splice(index, 1); } } }, // 移除一個條件 removeCondition(condition, index) { let categoryIndex = condition.uid.split("-")[0]; this.categories[categoryIndex].count --; this.conditions.splice(index, 1) condition.active = false; }, // 清空所有條件 clearCondition() { for(let i = this.conditions.length-1; i >=0 ; i--){ this.removeCondition(this.conditions[i], i); } } } }); </script> </body> </html>
標簽篩選的數據格式
data.js
var categories = [{
name: '品牌',
count: 0,
children: [{
name: '聯想',
}, {
name: '小米',
}, {
name: '蘋果',
}, {
name: '東芝',
}]
}, {
name: 'CPU',
count: 0,
children: [{
name: 'intel i7 8700K',
}, {
name: 'intel i7 7700K',
}, {
name: 'intel i9 9270K',
}, {
name: 'intel i7 8700',
}, {
name: 'AMD 1600X',
}]
}, {
name: '內存',
count: 0,
children: [{
name: '七彩虹8G',
}, {
name: '七彩虹16G',
}, {
name: '金士頓8G',
}, {
name: '金士頓16G',
}]
}, {
name: '顯卡',
count: 0,
children: [{
name: 'NVIDIA 1060 8G',
}, {
name: 'NVIDIA 1080Ti 16G',
}, {
name: 'NVIDIA 1080 8G',
}, {
name: 'NVIDIA 1060Ti 16G',
}]
}]以上是“Vue怎么實現多標簽選擇器”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
