基于Vue实现多标签选择器
实现效果
实现代码
<html lang="en">
<head>
<title>Documenttitle>
<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>
<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>
<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: "标签筛选的数据格式
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',
}]
}]