用vue3实现此功能:tabs可以切换，tabs里面有三个tab，每个 Tab 包含了若干个复选框。每个 Tab 内部可以全选所有复选框，如果有一个复选框没有被选中，则全选也不被选用，如果每个tab的复选框都被选中，则当前全选也被勾选，而第一个 Tab 有个选中所有复选框的全选功能，还有一个搜索框，可以搜索所有的复选框，搜索到则显示，搜索不到也显示暂无数据。每个复选框选中之后label文字颜色都会变色，如果不同 Tab 中的复选框有相同的值，则它们的选中状态会联动。写一个例子

以下是一个简单的实现：

<template>
<div>
<input type="text" v-model="searchText" placeholder="搜索">
<div class="tabs">
<div v-for="(tab, index) in tabs" :key="index" :class="{active: activeTab === index}" @click="activeTab = index">
{{ tab.name }}
<input type="checkbox" v-model="tab.selectAll" @change="selectAll(index)">
</div>
</div>
<div class="checkboxes">
<div v-for="(checkbox, index) in filteredCheckboxes" :key="index" :class="{selected: checkbox.selected}">
<input type="checkbox" v-model="checkbox.selected" @change="updateSelectAll(index)">
<label :style="{color: checkbox.selected ? 'red' : 'black'}">{{ checkbox.label }}</label>
</div>
<div v-if="filteredCheckboxes.length === 0">暂无数据</div>
</div>
</div>
</template>

<script>
export default {
data() {
return {
searchText: '',
activeTab: 0,
tabs: [
{
name: 'Tab 1',
selectAll: false,
checkboxes: [
{ label: 'Checkbox 1', selected: false },
{ label: 'Checkbox 2', selected: false },
{ label: 'Checkbox 3', selected: false },
]
},
{
name: 'Tab 2',
selectAll: false,
checkboxes: [
{ label: 'Checkbox 1', selected: false },
{ label: 'Checkbox 4', selected: false },
{ label: 'Checkbox 5', selected: false },
]
},
{
name: 'Tab 3',
selectAll: false,
checkboxes: [
{ label: 'Checkbox 6', selected: false },
{ label: 'Checkbox 7', selected: false },
{ label: 'Checkbox 8', selected: false },
]
}
]
}
},
computed: {
filteredCheckboxes() {
return this.tabs[this.activeTab].checkboxes.filter(checkbox => checkbox.label.includes(this.searchText))
}
},
methods: {
selectAll(tabIndex) {
const tab = this.tabs[tabIndex]
tab.checkboxes.forEach(checkbox => checkbox.selected = tab.selectAll)
},
updateSelectAll(checkboxIndex) {
const tab = this.tabs[this.activeTab]
const allSelected = tab.checkboxes.every(checkbox => checkbox.selected)
tab.selectAll = allSelected
}
}
}
</script>

<style>
.selected label {
color: red;
}
.tabs {
display: flex;
}
.tabs > div {
padding: 10px;
cursor: pointer;
}
.tabs > .active {
background-color: #ccc;
}
.checkboxes {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}
.checkboxes > div {
margin-right: 10px;
margin-bottom: 10px;
}
</style>