批量操作复选框的方法逻辑

复选框全选逻辑

无须多言上代码

//首先创造一个数组储存已经储存的id
const selectIds = ref<number[]>([])

//创建一个判断当前元素是否被选中的方法,绑定在单个复选框状态上,每点击一次复选框
const isSelect = (id:number) => {
    return selectIds.value.includes(id)
}

//创建一个点击复选框改变复选框状态的函数
const toggleSelected = (id:number) =>{
    if(isSelect(id)){
        //将选中id过滤
        selectIds.value = selectIds.value.filter(item => item !== id)
        //或者可以这么写
        const index = selectIds.value.indexOf(id);
        if (index !== -1) {
            selectIds.value.splice(index, 1);
        }
    }else{
        selectIds.value.push(id)
    }
}

//用计算属性控制全选复选框的状态
const selectAllChecked = computed(()=> {
    //tableData是数据所在变量
    if(tableData.value) {
        const allSelectableItems = tableData.value.filter((item) => item.status === 1 );//选取数据中指定的数据判定是否全选
        return allSelectableItems.every((item) => selectIds.value.includes(item.id));
    }
})

//处理点击全选复选框时的逻辑
const toggleSelectAll = () => {
    if(selectAllChecked){
        selectIds.value = []
    }else{
        //选中所有可选行的id
        if(tableData.value) {
            const allSelectableItems = tableData.value.filter(item => item.status === 1);
            selectedIds.value = allSelectableItems.map(item => item.id);//根据映射找到对应id
        }
    }
}

为什么单个复选框不用computed能绑定成功

当点击复选框时，isSelected(tlData.id) 会被调用是因为 Vue.js 的响应式系统监测到 isSelected(tlData.id) 的依赖发生了变化（即 selectedIds.value 的变化），并且需要重新计算并更新视图。这种机制确保了组件状态和数据的同步更新。

来自GPT

是写admin wjh遇到的一个新业务,防止以后忘记写个模板

写于综合阅览室