element-ui el-checkbox的一些坑

<!-- StcsmRole.vue -->
<template>
  <div>
    <el-row>
      <!-- 权限选择 -->
      <el-col :span="20" class="title">
        <span class="select">系统选择</span>
        <el-select v-model="value" placeholder="请选择" @change="select">
          <el-option v-for="item in options" :key="item.systemId" :label="item.sysName" :value="item.groupList">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="selectCheck" type="flex" align="middle" v-if="citys.length > 0">
      <el-col :span="4">
        <div class="spanTitle">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">权限组名称</el-checkbox>
        </div>
      </el-col>
      <el-col :span="16" class="selectRight">
        <el-checkbox-group class="checkbox" v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="item in citys" @change="handleCheckedCitiesChanges(item, $event)" :label="item" :key="item.accessId">{{item.accessName}}</el-checkbox>
        </el-checkbox-group>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import getSystemListGQL from '@/api/identity/query/getSystemList.gql'
import getAccessListGQL from '@/api/identity/query/getAccessList.gql'
export default {
  components: {},

  // filters: {},

  // props: {},
  data () {
    return {
      options: [],
      value: '',
      groupId: '',
      checkAll: false,
      checkedCities: [],
      citys: [],
      isIndeterminate: true
    }
  },

  computed: {},

  // created () {},

  mounted () {
    this.getSystemList()
  },

  methods: {
    // 点击是否全选
    handleCheckAllChange (val) {
      this.checkedCities = val ? this.citys : []
      this.isIndeterminate = false
    },
    // 多选事件
    handleCheckedCitiesChange (value) {
      console.log(value, 'ceshi')
      let checkedCount = value.length
      this.checkAll = checkedCount === this.citys.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.citys.length
    },
    handleCheckedCitiesChanges (value, event) {
      console.log(value, event, 'ceshi2')
    },
    select (value) {
      console.log(value)
      this.checkedCities = []
      this.isIndeterminate = false
      if (value.length > 0) {
        this.groupId = value[0].groupId
        this.getAccessList()
      } else {
        this.citys = []
      }
    },
    // 获取系统列表
    getSystemList () {
      this.$apollo
        .query({
          query: getSystemListGQL,
          fetchPolicy: 'network-only'
        })
        .then(res => {
          this.options = JSON.parse(JSON.stringify(res.data.getSystemList.data))
          console.log(this.options, '系统')
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 查询权限组下的权限
    getAccessList () {
      this.$apollo
        .query({
          query: getAccessListGQL,
          fetchPolicy: 'network-only',
          variables: {
            groupId: this.groupId,
            pageParams: {
              pageNum: 1,
              pageSize: 10
            }
          }
        })
        .then(res => {
          console.log(res.data.getAccessList.data.list, '权限')
          this.citys = JSON.parse(
            JSON.stringify(res.data.getAccessList.data.list)
          )
          console.log(this.citys, '权限')
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>
<style lang='stylus'  rel='stylesheet/stylus' scoped>
.title
  font-size 14px
  color #303133
  letter-spacing 0
  .select
    padding-right 40px
    padding-left 30px
.selectCheck
  margin 10px 0
  border 1px solid #DCDFE6
  border-radius 4px
  .spanTitle
    text-align center
  .selectRight
    border-left 1px solid #DCDFE6
    .el-checkbox
      margin 10px 0
      margin-left 30px
</style>