Element-ui framework checkbox full selection function is simple to implement

Element-ui framework checkbox all selection function

Renderings:

 

html：

  <div class="yetai">
    关联业态
    <el-checkbox
 
      v-model="checkAll"
      label="全选"
      @change="handleCheckAllChangeSales"
    ></el-checkbox>
    <el-checkbox-group
      v-model="bushForm"
      class="yetaixuan"
      @change="handleCheckedColumnChangeSales"
    >
      <el-checkbox
        v-for="(item, index) in tableData"
        :key="index"
        :label="item.name"
      ></el-checkbox>
    </el-checkbox-group>
  </div>

data bound data

  checkAll: false,

  isALL: false, // Whether the full selection box is checked

  tableData: [], //all data

  bushForm: [], //selected data

Write in the methods method:

//The idea of ​​selecting all--judging the length of the selected array and comparing it with the original array, if it is the same, it is judged that all are selected

  //全选
    handleCheckAllChangeSales(val) {

      console.log(val);

      var checkedsItem = val ? this.tableData : [];

      if (checkedsItem.length > 0) {

        checkedsItem.forEach((item) => {

          this.bushForm.push(item.name);

        });

      } else {

        this.bushForm = [];

      }

      this.isALL= false;

    },

    handleCheckedColumnChangeSales(value) {

      console.log(value);

      let checkedCount = value.length;

      this.checkAll = checkedCount === this.tableData.length;

      this.isALL=

        checkedCount > 0 && checkedCount < this.tableData.length;

    },

Full code:

<template>
  <div class="yetai">
    关联业态
    <el-checkbox
      v-model="checkAll"
      label="全选"
      @change="handleCheckAllChangeSales"
    ></el-checkbox>
    <el-checkbox-group
      v-model="bushForm"
      class="yetaixuan"
      @change="handleCheckedColumnChangeSales"
    >
      <el-checkbox
        v-for="(item, index) in tableData"
        :key="index"
        :label="item.name"
      ></el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkAll: false,
      isALL: false, // 全选框是否在勾选状态
      tableData: [
        {
          id: "2948100797124864",
          code: "Y000028",
          name: "医疗",
        },
        {
          id: "2948100937634048",
          code: "Y000029",
          name: "场馆",
        },
        {
          id: "2948101039902976",
          code: "Y000030",
          name: "机场站房",
        },
      ], //全部数据
      bushForm: [], //选中的数据
    };
  },
  methods: {
    //全选
    handleCheckAllChangeSales(val) {
      console.log(val);
      var checkedsItem = val ? this.tableData : [];
      if (checkedsItem.length > 0) {
        checkedsItem.forEach((item) => {
          this.bushForm.push(item.name);
        });
      } else {
        this.bushForm = [];
      }
      this.isALL = false;
    },

    handleCheckedColumnChangeSales(value) {
      console.log(value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.tableData.length;
      this.isALL =
        checkedCount > 0 && checkedCount < this.tableData.length;
    },
  },
};
</script>

<style scoped>
.yetai {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 55px;
}
.yetaixuan {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 10px;
}
</style>