做权限时 全选与模块及子模块的逻辑，用到了 `$event `

<template>
  <div>
    <a-modal
      :title="title"
      :width="640"
      :visible="value2"
      :maskClosable="false"
      @ok="permissionOk"
      @cancel="permissioncancel"
      class="permissionmodel"
    >
      <a-spin :spinning="spinning">
        <div style="margin-bottom:25px;">
          <a-checkbox @change="alltogo" :checked="allChecktogo">全选</a-checkbox>
        </div>

        <div
          class="permissionbox"

          v-for="(item,index) in modulesOptions"
          :key="'modul'+index"
        >
          <div>
            <a-checkbox
              @change="moduleChange(index,$event)"
              :checked="modulevalue[index]"
            >{{ item.modulname }}</a-checkbox>
          </div>
          <a-divider />
          <a-checkbox-group
            :options="item.moduldata"
            v-model="modulecheckedList[index]"
            @change="itemChange(index,$event)"
          />

        </div>
      </a-spin>
    </a-modal>
  </div>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 }
}
const modulesOptions = [
  { modulname: '权限', moduldata: ['权限列表', '用户管理', '用户组管理'] },
  { modulname: '系统配置', moduldata: ['设备配置', '产线配置', '工厂配置', '系统日志'] },
  { modulname: '故障分析', moduldata: ['故障统计', '故障列表'] }
]
const defaultCheckedList = [['权限列表', '用户组管理'], ['设备配置', '产线配置'], []]
const modulevalue = [false, false, false]
export default {
  name: 'Modifypermission',
  props: {
    value2: Boolean,
    // eslint-disable-next-line vue/require-default-prop
    title: String
  },
  watch: {
    modulevalue (newmodulval) {
      var that = this
      const fla = newmodulval.filter(item => item === false)
      if (fla.length === 0) that.allChecktogo = true
      else that.allChecktogo = false
    }
  },
  data () {
    return {
      formItemLayout,
      form: this.$form.createForm(this),
      modulecheckedList: defaultCheckedList,
      indeterminate: true,
      modulesOptions,
      allindeterminate: false,
      allChecktogo: false,
      modulevalue: modulevalue,
      spinning: false
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  methods: {
    alltogo (e) {
      var that = this
      that.allChecktogo = e.target.checked
      console.log(e.target.checked, '是否选上')
      var bbb = []
      var movalue = []
      if (e.target.checked) {
        bbb = []
        that.modulesOptions.map(item => {
          bbb.push(item.moduldata)
          movalue.push(true)
        })
        that.modulecheckedList = bbb
        that.modulevalue = movalue
      } else {
        bbb = []
        that.modulesOptions.map(item => {
          bbb.push([])
          movalue.push(false)
        })
        that.modulecheckedList = bbb
        that.modulevalue = movalue
      }
    },
    itemChange (index, data) {
      var that = this
      //  console.log(index, data)
      var flag = data.length === modulesOptions[index].moduldata.length
      that.modulevalue.splice(index, 1, flag)
      //   console.log(flag, that.modulevalue)
    },
    moduleChange (index, e) {
      var that = this
      that.modulevalue.splice(index, 1, e.target.checked)
      if (e.target.checked) {
        that.modulecheckedList.splice(index, 1, modulesOptions[index].moduldata)
      } else {
        that.modulecheckedList.splice(index, 1, [])
      }
    },

    permissioncancel () {
      this.$emit('permissioncancel', false)
    },
    permissionOk (e) {
      //  e.preventDefault()
      var that = this
      that.spinning = true
      that.$emit('permissionOk', false)
      setTimeout(() => {
        that.spinning = false
      }, 1500)
    }
  }
}
</script>
<style>
.permissionmodel .ant-modal-body, .permissionmodel .ant-modal-header{
background:#f0f2f5;
}

  .permissionbox{
border:1px dotted #c1c3c5;margin:15px auto;padding:10px;
background: white;
  }

</style>

说明：这是一个用antdesign 框架写的 里面用到了
allChecktogo 全选的状态
e.target.checked 这个是复选框点击时框架自动回调的 它的值是trueor false 也就是选中和未选中两种状态

• • 默认选中数组用一个modulecheckedList复合数组 存默认选中项,

• -默认源复合数组 用modulesOptions 存用于 循环模块需要用到的所有1级模块数据以及对应的所有子模块数据

• • 1级模块选中状态数组用modulecheckedList 存 1级模块选中状态的数据
• • 事件alltogo 点击全选 ，默认 回调 有e.target.checked参数 ， 事件moduleChange 点击1级模块的事件，默认 回调 有e.target.checked参数 ； 事件itemChange点击2级模块的事件，默认回调 是当前1级模块被选中的数据；

•  逻辑思路如下
  

• • 点击2级子模块，通过回调参数判断选中的数据长度，与源复合数组中对应索引项的数据长度对比，如果相同则对应1级子模块为选中状态，即把1级模块选中状态数组对应索引的数据替换为true
• • 点击1级模块 通过 e.target.checked参数 判断选中状态，若是选中状态为真 则把默认选中数组对应索引的子数组替换为源复合数组中对应索引项的数据，若选中状态为假，把默认选中状态数组中对应索引的子数组替换为空数组
• • 点击全选时 : 若 通过 e.target.checked参数 判断选中状态 是为true 则 （1）遍历1级模块选中状态数组每一项并用 true 替换原来的数据； （2）遍历默认选中数组并用默认源复合数组对应索引项数据替换原来的。 （3）把全选状态改为 e.target.checked
    若 通过 e.target.checked参数 判断选中状态是为false（1）遍历1级模块选中状态数组每一项并用false 替换原来的数据； （2）遍历默认选中数组并用空数组替换原来的对应索引项数据。 （3）把全选状态改为 e.target.checked
• • 由于 1级模块的状态连接着全选和2级模块状态，因此在这里 把1级模块选中状态数组做个监听
    当 遍历 1级模块选中状态数组 发现没有为 false想的时候 全选 设为选中状态，否则 是非选中状态。
    ===============================================================
    注意 这里用到了 $event
    在框架中含有回调参数以及参数值 时，事件放在循环中，通过 索引index区分对应项事件时，需要在函数参数index 后面添加 $event 参数。这样来保证原来回调的东西还可以出来。这里也就是在html中加了，在methods 中没有加。 html 中，$event 参数位置，是默认回调函返回数据的位置