1、html部分

  <div v-for="(item, index) in data" :key="index">
      <el-checkbox
        style="margin-left: 30px"
        :indeterminate="item.isIndeterminate"
        v-model="item.isCheck"
        @change="checkTitle(item.isCheck, index)"
        >全選</el-checkbox
      >

      <el-checkbox-group
        v-model="item.checkedData"
        @change="checkItem(item.checkedData, index)"
      >
        <el-checkbox
          v-for="(a, index) in item.children"
          :label="a.value"
          :key="index"
          >{{ a.label }}</el-checkbox
        >
      </el-checkbox-group>
    </div>

2、js部分

<script>
export default {
  data() {
    return {
      data: [
        {
          isCheck: false,
          isIndeterminate: true,
          checkedData: [],
          children: [
            {
              value: "11",
              label: "分組1-1",
            },
            {
              value: "12",
              label: "分組1-2",
            },
          ],
        },
        {
          isCheck: false,
          isIndeterminate: true,
          checkedData: [],
          children: [
            {
              value: "21",
              label: "分組2-1",
            },
            {
              value: "22",
              label: "分組2-2",
            },
            {
              value: "23",
              label: "分組2-3",
            },
            {
              value: "24",
              label: "分組2-4",
            },
          ],
        },
      ],
    };
  },
  methods: {
    checkItem(val, index) {
      let checkedCount = val.length;
      this.data[index].isCheck =
        checkedCount === this.data[index].children.length;

      this.data[index].isIndeterminate =
        checkedCount > 0 && checkedCount < this.data[index].children.length;
    },

    checkTitle(val, index) {
      let arr = [];
      const re = this.data[index].children;
      //全選
      if (val) {
        for (let i = 0; i < re.length; i++) {
          arr[i] = re[i]["value"];
        }
      }
      this.data[index].checkedData = arr;
      this.data[index].isIndeterminate = false;
    },
  },
};
</script>

效果圖：

image.png

總結(jié)：

1. indeterminate屬性 表示 checkbox 的不確定狀態(tài) (小橫線樣式)
2. 此代碼中為mock數(shù)據(jù)，真實(shí)場景中，首先拿到接口返回?cái)?shù)據(jù)，之后加工成前端想要的數(shù)據(jù)結(jié)構(gòu) (類似代碼中data的數(shù)據(jù)格式)，可通過for循環(huán)、map遍歷、reduce等方式
3. 在@change事件中寫內(nèi)部邏輯，最終實(shí)現(xiàn)功能