本文实例为大家分享了vue实现多标签选择器展示的具体代码，供大家参考，具体内容如下

实现效果

实现代码

document

.not-active {

display: inline-block;

font-size: 12px;

margin: 5px 8px;

}

span {

margin: 0 2px;

}

// 简单封装一个公用组件

vue.component('my-tag', {

template: "",

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);

}

}

}

});

标签筛选的数据格式

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',

}]

}]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。