tab标签页与checkbox复选框结合使用（在vue3中使用情况）

1、引用element的tab标签页和checkbox复选框

<el-tabs v-model="activeName" @tab-click="handleClick"> 
    <el-tab-pane label="item" name="item" v-for="(item,index) in tabList" :key="index">
        <el-checkbox-group v-model="checkList" @change="handleChecked"> 
            <el-checkbox label="items" v-for="items in dataList" :key="items" :title="items.AssetName">{{ items.AssetName }}</el-checkbox> 
        </el-checkbox-group>
    </el-tab-pane> 
</el-tabs>
<el-checkbox class="checkAll" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>

大致层次结构如图：

2、处理接口数据

//（1）在调用接口的方法外，创建接收数据的变量
let dataObjects = ref([])
let dataListObjiects = ref([])
let tabList = ref([])
// (2)发起请求，获得数据
function 方法名() {
    $http({
        url: 接口,
        method:"post",
        data:接口上传数据
    })
    .then((data) => {
        if(接口请求成功){
            // (3)处理数据
            let dataList = data.list
            let resultList = []
            dataList.forEach((item,index)=>{
                let result = ......  //数据处理
                item.tabName = result //在数据中创建一个全新的值，用来接收处理后的数据
                item.Pnumber = index  //在数据中创建一个全新的值，用来接收索引，以给每一个数据一个独一无二的值
                resultList.push(result) //将处理后的数据放入准备好的空数组中
            })
            // 数据去重
            for(let i=0;i<resultList.length;i++){
                for(let j=i+1;j<resultList.length;j++){
                    if(resultList[i]==resultList[j]){
                        resultList.splice(j,1)
                        j--
                    }
                }
            }
            // 在去重后的数据的最前面添加一个“全部分类”
            resultList.unshift('全部分类')
            // 给方法外定义好的变量赋值
            tabList.value = resultList
            dataListObjects.value = data.list
            dataObjects.value = data.list
        }
    })
    .catch((err)=>{
        console.log(err)
    })
}

3、tab标签页切换方法

const handleClick = (tab,event) => {
    dataObjects.value = []  // tab标签页切换时，tab标签数据清空
    dataListObjects.value.forEach(item => {
        if(tab.paneName=="全部分类"){    //当激活的tab标签是“全部分类”时
            dataObjects.value = dataListObjects.value  //所有选项
        }else if(item.tabName ==tab.paneName ){
            dataObjects.value.push(item) //选取属于所激活标签页的选项，添加进入v-for循环的数组当中
        }
    })
    //全选是否勾上
    changeList()
})

4、全选

// 选中的数据文件对象，决定各tab标签页下的各选项是否勾选
let checkedDataObjects = ref([])
// 所有被选中的数据
const ischeckedList = ref([])
 // 全选框选中状态的回调
function handleCheckAllChange(value) {
    if(value){
        // 当全选按钮勾上时，将该tab标签页下的选项全部添加到“所有被选中的数据”中
        dataObject.value.forEach(item => {
            ischeckedList.value.push(item)
        })
    }else{
        // 当全选按钮取消勾选时，将该tab标签页下的选项从“所有被选中的数据”中删除
        dataObjects.value.forEach(item => {
            let y = ischeckedList.value.indexOf(item)
            if(y>-1){
                ischeckedList.value.splice(y,1)
            }
        })
    }
    //各标签页需要勾选的数据，即当前页面取消全选，其他页面的勾选情况不影响
    checkedDataObjects.value = ischeckedList.value
}

5、其他复选框选中状态的回调

// 数据文件对象的全选
let checkAll = ref(false)
function handleCheckedDataObjectsChange(value) {
    // value是checkedDataObjiects收集到的label数据
    let checkedCount = value.length
    // 将已勾选的数据赋给ischeckedList
    ischeckedList.value = value
    // 当选中的数据等于所有的数据的时候，全选框勾上
    checkAll.value = checkedCount === dataObjects.value.length
    // 调用changeList方法
    changeList()
}

6、tab标签页下的复选框与全选框的关联

// 当每个tabs标签页下的复选框全部选中时，全选按钮自动勾选
const changeList = () =>{
    // 设置一个用来判断的参数变量
    let x = 0
    for(let i=0;i<dataObjects.value.length;i++){    // 遍历当前tabs标签页下的所有复选框选项
        for(let j=0;j<ischeckedList.value.length;j++){   // 遍历所有已选中的内容
            // 当tabs标签页下的选项在已勾选的内容中存在，就让x+1
            if(dataObjects.value[i].Pnumber == ischeckedList.value[j].Pnumber){
                x++
            }
        }
    }
    // 判断：当tabs标签页下的内容长度 = x 时，当前页的全选按钮勾上
    if(dataObjects.value.length == x){
        checkAll.value = true
    }else{
        checkAll.value = false
    }
}