element-ui框架復(fù)選框全選功能

效果圖：

?

html：

  <div class="yetai">
    關(guān)聯(lián)業(yè)態(tài)
    <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綁定的數(shù)據(jù)

? checkAll:?false,

? isALL:?false,?//?全選框是否在勾選狀態(tài)

??tableData:?[],?//全部數(shù)據(jù)

??bushForm:?[],?//選中的數(shù)據(jù)

methods方法里寫：

//全選的思路--判斷選中的數(shù)組的長(zhǎng)度和原數(shù)組對(duì)比，一樣的話就判斷全部選中

??//全選
????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;

????},

全部代碼:文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-505183.html

<template>
  <div class="yetai">
    關(guān)聯(lián)業(yè)態(tài)
    <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, // 全選框是否在勾選狀態(tài)
      tableData: [
        {
          id: "2948100797124864",
          code: "Y000028",
          name: "醫(yī)療",
        },
        {
          id: "2948100937634048",
          code: "Y000029",
          name: "場(chǎng)館",
        },
        {
          id: "2948101039902976",
          code: "Y000030",
          name: "機(jī)場(chǎng)站房",
        },
      ], //全部數(shù)據(jù)
      bushForm: [], //選中的數(shù)據(jù)
    };
  },
  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>

到了這里，關(guān)于element-ui框架復(fù)選框全選功能簡(jiǎn)單實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！