elementPlus+vue3多选框的全选/全不选实现

最新推荐文章于 2024-05-10 16:42:29 发布

莓莓hoho~

最新推荐文章于 2024-05-10 16:42:29 发布

阅读量725

点赞数

分类专栏： vue3(setup) 文章标签： elementui vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_48647907/article/details/134548360

版权

vue3(setup) 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

后端接口返回的数据

在这里插入图片描述

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>