vue el-checkbox 全选

最新推荐文章于 2024-05-21 21:57:08 发布

木木要学习

最新推荐文章于 2024-05-21 21:57:08 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/weixin_62601942/article/details/126740090

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<template>
  <div>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckChange">全选</el-checkbox>
  </div>
  <el-checkbox v-for="item in itemList" :label="item" :key="item.id" :disabled="item.disabled"
    @change="handleCheckedItemChange(idx,item.id,item.selected,item.name)" v-model="item.selected">{{item.name}}
  </el-checkbox>
</template>
<script>
export default {
  data() {
    return {
      checkAll: false,
      isIndeterminate: false,
      itemlist: [
        {
          id: "1",
          name: "你好",
          selected: false,
          disabled: false,
          visible: true,
        },
        {
          id: "2",
          name: "他好",
          selected: false,
          disabled: false,
          visible: true,
        },
      ],
    };
  },
  methods: {
    // 判断是否全选
    handleCheckedAllItem() {
      let levelAllChecked = true;
      let checked = false;
      for (let item of this.itemlist) {
        if (!item.selected) {
          levelAllChecked = false;
        } else {
          checked = true;
        }
      }
      this.checkAll = levelAllChecked;
      if (levelAllChecked) {
        this.isIndeterminate = false;
      } else {
        this.isIndeterminate = checked;
      }
    },
    handleCheckedItemChange() {
      this.handleCheckedAllItem();
    },
  },
};
</script>