checkbox全选

兜小糖的小秃毛

已于 2022-09-16 16:32:00 修改

阅读量171

点赞数

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

于 2022-09-16 16:31:00 首次发布

本文链接：https://blog.csdn.net/Roy__Jason/article/details/126893193

版权

Vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<template>
  <div class="page_four">
    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
      >全选</el-checkbox
    >
    <el-checkbox-group v-model="checkedArr" @change="handleCheckedCitiesChange">
      <el-checkbox
        v-for="(item, index) in checkItem"
        :key="index"
        :label="item"
        >{{ item }}</el-checkbox
      >
    </el-checkbox-group>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "pageFour",
  setup() {
    const state = reactive({
      isIndeterminate: true,
      checkAll: false,
      checkedArr: ["油条", "豆浆"],
      checkItem: ["玉米", "鸡蛋", "麻圆", "牛奶", "油条", "豆浆"],
    });
    function handleCheckAllChange(val: boolean) {
      state.checkedArr = val ? state.checkItem : [];
      state.isIndeterminate = false;
    }
    function handleCheckedCitiesChange(val: string[]) {
      const checkedCount = val.length;
      state.checkAll = checkedCount === state.checkItem.length;
      state.isIndeterminate =
        checkedCount > 0 && checkedCount < state.checkItem.length;
    }
    return {
      ...toRefs(state),
      handleCheckAllChange,
      handleCheckedCitiesChange,
    };
  },
});
</script>