核心代码如下你试试,然后部分逻辑需要自己优化一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>条件筛选</title>
<style>
ul {
list-style: none;
display: flex;
flex-wrap: wrap;
}
li{
padding: 8px;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="app">
<div class="filter-title">服务类型:</div>
<ul class="nav filter-list" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link" id="tabs-all-tab" data-bs-toggle="pill" role="tab" aria-controls="tabs-all" aria-selected="false" @click.stop="handleSearchForm">全部</a>
</li>
<template v-for="(type,index) in options.mailServiceTypeList">
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="pill" :href="'#tabs-'+type.id" role="tab" aria-controls="tabs-1" aria-selected="false" :data-typeid="type.id" @click.stop="handleSearchForm(type)">{{type.name}}</a>
</li>
</template>
</ul>
<ul class="nav filter-list" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link" id="tabs-all-tab" data-bs-toggle="pill" role="tab" aria-controls="tabs-all" aria-selected="false">已选条件</a>
</li>
<template v-for="(type,index) in selectedRows">
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="pill" :href="'#tabs-'+type.id" role="tab" aria-controls="tabs-1" aria-selected="false" :data-typeid="type.id" @click.stop="remove(type)">{{type.name}}</a>
</li>
</template>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data: function() {
return {
options: {
mailServiceTypeList: [
{name: '全部', id: 1},
{name: '企业孵化', id: 2},
{name: '研发设计', id: 3},
{name: '检验检测', id: 4},
{name: '知识产权', id: 5},
{name: '技术转移', id: 6}
]
},
// 已选条件
selectedRows: []
}
},
methods:{
handleSearchForm: function (type) {
// TODO: 这里记得做去重处理, 示例代码, 没有写
if(type) this.selectedRows.push(type)
},
// 点击删除
remove: function(type){
var list = []
for(let item of this.selectedRows) {
if(item.id!=type.id) list.push(type)
}
this.selectedRows = list
}
}
})
</script>
</body>
</html>