ElementUI checkbox同时选中

ElementUI的checkbox小操作

起因

今天在工作的时候，碰到一个比较有意思的小问题，就是Element的checkbox选择问题。
想要实现选中1个另外一个也自动被选中，取消选中另一个也被取消选中。

成品

步骤

1. 首先获取点击的checkbox
2. 查看当前点击的需不需要其他一起变化
3. 判断当前点击的是选中还是取消
4. 其他按钮跟着变化

原理

ElementUI中的checkbox会把数据存到一个数组，对数组进行增加或者减少就可以。

代码

部分代码

1. 定义checkbox

   <el-checkbox-group v-model="checkList" @change="checkOthers">
     <el-checkbox label="1"></el-checkbox>
     <el-checkbox label="2"></el-checkbox>
     <el-checkbox label="3"></el-checkbox>
     <el-checkbox label="4"></el-checkbox>
     <el-checkbox label="5"></el-checkbox>
   </el-checkbox-group>
   

2. 定义data

   data(){
     return {
       checkList: [], // 选中的值
       prevCheckList: [], // 之前选中的值
       changedValue: [], // 改变的值
       bindData: [['1','2'],['3','5']] // 绑定的值
     }
   },
   

3. 定义methods

   methods:{
     checkOthers(){
       // 获取改变的值（changedValue），通过合并两个数组并遍历，changedValue的个数应该是1
       [this.changedValue = ''] = this.checkList.concat(this.prevCheckList).filter(function(v, i, arr) {
         return arr.indexOf(v) === arr.lastIndexOf(v);
       });
       // 遍历绑定的数据
       for(const val of this.bindData){
         // 如果changedValue在此数组中
         if(val.indexOf(this.changedValue) !== -1){
           // 如果选中的列表中包含changedValue，说明changedValue是新选中的值
           if(this.checkList.indexOf(this.changedValue) !== -1){
             // 首先将changedValue和与他绑定的值增加到checkList，然后去重复
             this.checkList = Array.from(new Set(this.checkList.concat(val)))
           }else{
             // 走到这里说明changedValue是被取消选中的值，将与changedValue绑定的值都取消选中
             this.checkList = this.checkList.filter(item =>{
               if(val.indexOf(item) === -1){
                 return item
               }
             })
           }
         }
       }
       // 更新prevCheckList
       this.prevCheckList = this.checkList.concat()
     }
   }
   

整体代码

<template>
  <div id="app">
    <el-row>
      <el-col :span="8" :offset="8">
        <el-card shadow="always">
          <span>要求：1和2的状态同步变化，3和5的状态同步变化。</span>
           <el-divider>xiaoluo</el-divider>
          <el-checkbox-group v-model="checkList" @change="checkOthers">
            <el-checkbox label="1"></el-checkbox>
            <el-checkbox label="2"></el-checkbox>
            <el-checkbox label="3"></el-checkbox>
            <el-checkbox label="4"></el-checkbox>
            <el-checkbox label="5"></el-checkbox>
          </el-checkbox-group>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  data(){
    return {
      checkList: [], // 选中的值
      prevCheckList: [], // 之前选中的值
      changedValue: [], // 改变的值
      bindData: [['1','2'],['3','5']] // 绑定的值

    }
  },
  methods:{
    checkOthers(){
      // 获取改变的值（changedValue），通过合并两个数组并遍历，changedValue的个数应该是1
      [this.changedValue = ''] = this.checkList.concat(this.prevCheckList).filter(function(v, i, arr) {
        return arr.indexOf(v) === arr.lastIndexOf(v);
      });
      // 遍历绑定的数据
      for(const val of this.bindData){
        // 如果changedValue在此数组中
        if(val.indexOf(this.changedValue) !== -1){
          // 如果选中的列表中包含changedValue，说明changedValue是新选中的值
          if(this.checkList.indexOf(this.changedValue) !== -1){
            // 首先将changedValue和与他绑定的值增加到checkList，然后去重复
            this.checkList = Array.from(new Set(this.checkList.concat(val)))
          }else{
            // 走到这里说明changedValue是被取消选中的值，将与changedValue绑定的值都取消选中
            this.checkList = this.checkList.filter(item =>{
              if(val.indexOf(item) === -1){
                return item
              }
            })
          }
        }
      }
      // 更新prevCheckList
      this.prevCheckList = this.checkList.concat()
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

欢迎关注公众号！xiaoluo的前端之路更多优质文章等你来读。