element ui复选框点击全选，单选取消全选状态，再次单选所有显示全选状态。。提交表单给后台一个数组id。。。

前言：

这是一个复选框，复选框的内容是通过后台获取过来的，选中后提交表单要传一个数组（数组里是权限的id）给后台。大概就是这样了。。。我都语无伦次了。。。。

正题：

1. 首先得从后台获取到数据。。。。这是获取后台的数据，就不详细说了吧。。。。

mounted() {
  this.$api.permissionsList(1, 100).then(res => {
    //console.log(res.data.data)
    this.rolesList = res.data.data
  })
},

就是获取到这个权限列表而已。

2. 这是elementui 复选框的组件

    <el-form-item label="权限选择">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
         <div style="margin: 15px 0;"></div>
         <el-checkbox-group v-model="checkedRoles" @change="CheckedRolesChange">
           <el-checkbox v-for="role in rolesList" :label="role" :key="role.id">
             {{role.name}}
           </el-checkbox>
         </el-checkbox-group>
  </el-form-item>

3. 这是data里定义的一些相关属性

<script>
  export default {
    data() {
      return {
        rolesList: [],
        checkedRoles: [],
        checkAll: false,
        isIndeterminate: false,
     }
    }
  }
<script>

4. 这是方法体。。自己看注释吧，写的有点烂，我自己都不想看第二遍（
   哈哈哈哈）

methods: {
  /* 全选权限 */
  handleCheckAllChange(val) {
    //判断数组是否有相同数字或字符，有返回true。正则表达式
    Array.prototype.in_array = function(e) {
      var r = new RegExp(',' + e + ',');
      return (r.test(',' + this.join(this.S) + ','));
    };
    /* 三元表达式 */
    this.checkedRoles = val ? this.rolesList : [];
    for (let i = 0; i < this.checkedRoles.length; i++) {
      let roleid = this.checkedRoles[i].id
      //判断权限数组里是否存在相同的ID,为true跳出判断，不能用return，不然会跳出循环。为false追加进权限数组里
      let ss = this.form.permission_id.in_array(roleid)
      if (ss === true) {
        continue;
      } else {
        this.form.permission_id.push(roleid)
      }
    }
    //假设val为true(全选状态)，就把权限ID追加（push）进permission_id[]数组里；否则为空
    this.form.permission_id = val ? this.form.permission_id:[]
    console.log(this.form.permission_id)
  },
  /* 单选 */
  CheckedRolesChange(value) {
  	 this.checkedRoles = value
    let checkedCount = value.length;
    //判断假如单选的长度与权限列表长度一致则为true显示勾，否则为false
    this.checkAll = checkedCount === this.rolesList.length;
    //点击单选时，判断选择的权限数组里是否存在这个id,没有则添加，取消钩子要从数组里删除该权限
    let roleid = []
    for (let i = 0; i < value.length; i++) {
      roleid.push(value[i].id)
    }
    this.form.permission_id = roleid
    console.log(this.form.permission_id)
  },
 }

留个印记吧，我不想再写第二遍了