效果图
后端接口返回的数据
template部分
<div class="content">
<h3>请选择公示的内容</h3>
<div>
<div class="basicEx">
<el-checkbox
v-model="basicCheckAllEx"
:indeterminate="isbasicminateEx"
@change="handleBasicAllChangeEx"
>全选</el-checkbox>
<el-checkbox-group v-model="basicValsEx" @change="handleCheckedBasicChangeEx">
<el-checkbox
v-for="(item,index) in basicNeed"
:key="index"
:label="item"
border
:size="small"
>{{item.codeMeaning}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
js部分
const basicNeed=ref([])
if(props.listPublicityOpen){
getOutColumnNamesHandler()
}
// 从后端获取勾选框信息
async function getOutColumnNamesHandler(){
await getOutColumnNames().then(res=>{
if(res.code==200){
basicNeed.value=res.data
}
})
}
// 多选框
const basicCheckAllEx = ref(false);
const isbasicminateEx = ref(false);
const basicValsEx = ref([]);
const handleBasicAllChangeEx = (val) => {
// console.log(val,'1111');
basicValsEx.value = val ? basicNeed.value : [];
// console.log(basicValsEx.value,'22222');
isbasicminateEx.value = false;
};
const handleCheckedBasicChangeEx = (value) => {
const checkedCountBasicEx = value.length;
basicCheckAllEx.value = checkedCountBasicEx === basicNeed.value.length;
isbasicminateEx.value =checkedCountBasicEx > 0 && checkedCountBasicEx < basicNeed.value.length;
};
至此就完成了全选和全不选的功能了!我们需要的数据就在 basicValsEx.value这里
样式美化
<style lang="scss" scoped>
.content {
.basicEx {
display: flex;
}
.rightEx {
flex: 1;
.rigTitle {
height: 150px;
.sure {
padding-top: 52px;
float: right;
bottom: 20px;
}
}
}
}
h3{
font-size: 0.5625rem;
font-weight: bolder;
}
.el-checkbox.is-bordered {
margin: 5px 10px;
border-radius: var(--el-border-radius-base);
border: var(--el-border);
box-sizing: border-box;
width: 146px;
}
.el-checkbox {
background-color: #EDEDED;
margin: 5px 0;
}
.basic>.el-checkbox{
background-color: #FFFFFF;
}
.basicEx>.el-checkbox{
background-color: #FFFFFF;
}
</style>