取得效果
实现代码
hml lang=' en ' headtitledocument/title！ -部署本地组件库--link rel=' style sheet ' href=' static/element-ui/index.CSS ' script src=' static/element - link rel=' style sheet ' href=' https://un pkg.com/element-ui/lib/theme-chalk/index.CSS '--！ - script src=' https://cdn.jsdelivr.net/NPM/vue/dist/vue.js '/script-- -！ - script src=' https://un pkg.com/element-ui/lib/index.js '/script-- style.not-active { display 3360 inline } ff 边距： 5px 8px； } span { margin: 0 2px； } /style/headbody div id='app '！ -候选标签-- div v-for='(category，categoryIndex ) in categories ' 3360 key=' category.id '！ ---分类--- span class=' not-active ' { category.name }:/spantemplatespanv-if=' category.count ' class=' NAT childIndex ) in category.children ' my-tagv-if=' child.active ' 3360 closable category index，child， childindex({child.name}/my-tagspanv-else class=' not-active ' @ click=' clickchhass -选定的标记--divv-if=' conditions.length ' span clan class agv index ) in conditions ' : key=' condition.id ' type=' primary ' : closable=' true ' size=' small ' 3360 disabable
='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', }]}]