[JavaScript知识库] 处理动态返回复选框设置全选功能

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 处理动态返回复选框设置全选功能 -> 正文阅读

[JavaScript知识库]处理动态返回复选框设置全选功能

在这里插入图片描述

<template>
  <div class="form_item">
    <div class="form_item_title">申报项</div>

    <div class="checkBoxContent">
      <!-- <div class="choose">A选项</div> -->
      <div class="checkList">
        <div
          v-for="(item, indexV) in checklistData"
          :key="indexV"
          class="parentList"
        >
          <p>
            {{ item.parentName }}
            <el-checkbox  :value="editData['checkAll_'+indexV]"  @change="(val)=>{handleCheckAllChange(val,indexV)}">全选</el-checkbox>
          </p>
          <div class="checkBoxList">
            <div v-for="(itemd, index) in item.childrenList" :key="index">
              <el-checkbox-group v-model="checkList" @change="(val)=>{handleCheckedChange(val,indexV)}">
                <el-checkbox
                  v-for="(childrenItem, index) in itemd"
                  :key="index"
                  :label="childrenItem.id"
                  >{{ childrenItem.parentName }}</el-checkbox
                >
              </el-checkbox-group>
            </div>

            <!-- <el-checkbox></el-checkbox> -->
          </div>
        </div>
      </div>
      <div class="footerBtn">
        <Button type="primary" @click="saveCheck">选择</Button>
        <Button type="primary" @click="cancelCheck" style="margin-left: 10px"
          >取消</Button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    checklistData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      checkList: [],
      editData:{
          checkAll_0:false,
          checkAll_1:false,
          checkAll_2:false
      },
      checkAll1:false,
      isIndeterminate:false,
      checkAll:false,
      //默认高度
      heightStyle: 100,
    };
  },
  watch: {
    checklistData: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      immediate: true, //刷新加载 立马触发一次handler
      deep: true, // 可以深度检测到 obj 对象的属性值的变化
    },
  },
  computed: {},
  created() {},
  methods: {
    handleCheckAllChange(val,index) {
      let flatArr = this.checklistData[index].childrenList.flat(Infinity).map(item=>item.id)
      this.editData['checkAll_'+index] = val
      this.checkList = val ? this.checkList.concat(flatArr) : this.checkList.filter(item=>(!flatArr.includes(item)));
    },
    handleCheckedChange(val,index){
      let flatArr = this.checklistData[index].childrenList.flat(Infinity).map(item=>item.id)
      this.editData['checkAll_'+index] = flatArr.every(item=>val.includes(item))
    },
    saveCheck() {
      this.$emit("saveClick", this.checkList);
    },
    cancelCheck() {
      this.checkList = [];
      this.$emit("cancelClick", this.checkList);
    },
  },
};
</script>
<style lang="less" scoped>
.checkBoxContent {
  // padding: 24px;
  width: 100%;
  .checkList {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    overflow: auto;

    .parentList {
      font-weight: 900;

      // min-width: 200px;
      width: 30%;
      width: auto;
      // p {
      //   text-align: center;
      // }
      .checkBoxList {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
    .el-checkbox-group {
      font-size: 0;
      display: flex;
      flex-direction: column;

      // .el-checkbox: {
      //   height: 20px;
      // }
      .el-checkbox {
        height: 30px;
        margin-top: 10px;
      }
    }
  }
  .footerBtn {
    margin-top: 24px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>