vue+elementUI实现多选联动选择

先看一下效果图

 

实现过程：

template

<div class="typeIsGame">
                <div class="game" style="borderBottom:0">
                    <p>游戏类别:</p>
                    <el-checkbox-group v-model="checkType">
                        <el-checkbox label="棋牌" @change="chess"></el-checkbox>
                        <el-checkbox label="牛牛" @change="niuniu"></el-checkbox>
                        <el-checkbox label="捕鱼" @change='catchFish'></el-checkbox>
                        <el-checkbox label="百人" @change="hundred"></el-checkbox>
                    </el-checkbox-group>
                </div>
                <div class="game">
                    <p style="width:100px;marginRight:10px">游戏名:</p>
                    <span>
                        <el-checkbox v-model="checkList" @change='changeShowList' label="港式五张" style="width:80px;"></el-checkbox>
                        <el-checkbox v-model="checkList" @change='changeShowList' label="德州扑克" style="width:80px;"></el-checkbox>
                        <el-checkbox v-model="checkList" @change='changeShowList' label="牛牛-随机庄" style="width:80px;"></el-checkbox>
                        <el-checkbox v-model="checkList" @change='changeShowList'  label="牛牛-看牌抢庄" style="width:80px;"></el-checkbox>
                        <el-checkbox v-model="checkList" @change='changeShowList'  label="牛牛-通比" style="width:80px;"></el-checkbox>
                        <el-checkbox v-model="checkList" @change='changeShowList'  label="抢庄牛牛" style="width:80px;"></el-checkbox>
                        <el-checkbox v-model="checkList" @change='changeShowList'  label="李逵捕鱼" style="width:80px;"></el-checkbox>
                        <el-checkbox v-model="checkList" @change='changeShowList'  label="金蟾捕鱼" style="width:80px;"></el-checkbox>
                        <el-checkbox v-model="checkList" @change='changeShowList'  label="欢乐30秒" style="width:80px;marginLeft:0;"></el-checkbox>
                        <el-checkbox v-model="checkList" @change='changeShowList'  label="百牛" style="width:80px;"></el-checkbox>
                        <el-checkbox v-model="checkList" @change='changeShowList'  label="龙虎" style="width:80px;"></el-checkbox>
                        <el-checkbox v-model="checkList" @change='changeShowList'  label="奔驰宝马" style="width:80px;"></el-checkbox> 
                        <el-checkbox v-model="checkList" @change='changeShowList'  label="飞禽走兽" style="width:80px;"></el-checkbox> 
                        <el-checkbox v-model="checkList" @change='changeShowList'  label="炸金花" style="width:80px;"></el-checkbox> 
                        <el-checkbox v-model="checkList" @change='changeShowList'  label="二八杠" style="width:80px;"></el-checkbox>  
                    </span>
                </div>
            </div>

script

<script>
export default {
  data() {
    return {
      checkList: [], //收益类型为自选游戏的时候   默认选中的游戏
      showList: [], //最终选中的游戏名
      checkType: [], //最终选中的游戏类别
      chessNum: 1, //棋牌点击计算次数
      niuniuNum: 1, //牛牛点击计算次数
      catchFishNum: 1, //捕鱼点击计算次数
      hundredNum: 1, //百人点击计算次数
    };
  },
methods:{
// 收益类型--自选游戏显示的游戏类别
    // 棋牌类游戏名
    chess() {
      if (this.chessNum == 1) {
        this.checkList.push("德州扑克");
        this.checkList.push("炸金花");
        this.checkList.push("二八杠");
        this.chessNum = 2;
      } else {
        let arr = this.checkList;
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] == "德州扑克") {
            arr.splice(i, 1);
          }
          if (arr[i] == "炸金花") {
            arr.splice(i, 1);
          }
          if (arr[i] == "二八杠") {
            arr.splice(i, 1);
          }
        }
        this.checkList = arr;
        this.chessNum = 1;
      }
      this.changeShowList();
    },
    // 牛牛类游戏名
    niuniu() {
      // 点击一下选中，再点击删除
      if (this.niuniuNum == 1) {
        this.checkList.push("牛牛-随机庄");
        this.checkList.push("牛牛-看牌抢庄");
        this.checkList.push("牛牛-通比");
        this.checkList.push("抢庄牛牛");
        this.niuniuNum = 2; //控制选中
      } else {
        let arr = this.checkList;
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] == "牛牛-随机庄") {
            this.checkList.splice(i, 1);
          }
          if (arr[i] == "牛牛-看牌抢庄") {
            this.checkList.splice(i, 1);
          }
          if (arr[i] == "牛牛-通比") {
            this.checkList.splice(i, 1);
          }
          if (arr[i] == "抢庄牛牛") {
            this.checkList.splice(i, 1);
          }
        }
        this.checkList = arr;
        this.niuniuNum = 1; //控制选中
      }
      this.changeShowList();
    },
    //捕鱼类游戏名
    catchFish() {
      if (this.catchFishNum == 1) {
        this.checkList.push("李逵捕鱼");
        this.checkList.push("金蟾捕鱼");
        this.catchFishNum = 2;
      } else {
        let arr = this.checkList;
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] == "李逵捕鱼") {
            this.checkList.splice(i, 1);
          }
          if (arr[i] == "金蟾捕鱼") {
            this.checkList.splice(i, 1);
          }
        }
        this.checkList = arr;
        this.catchFishNum = 1;
      }
      this.changeShowList();
    },
    //百人类游戏名
    hundred() {
      if (this.hundredNum == 1) {
        this.checkList.push("欢乐30秒");
        this.checkList.push("百牛");
        this.checkList.push("龙虎");
        this.checkList.push("奔驰宝马");
        this.checkList.push("飞禽走兽");
        this.hundredNum = 2;
      } else {
        let arr = this.checkList;
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] == "欢乐30秒") {
            this.checkList.splice(i, 1);
          }
          if (arr[i] == "百牛") {
            this.checkList.splice(i, 1);
          }
          if (arr[i] == "龙虎") {
            this.checkList.splice(i, 1);
          }
          if (arr[i] == "奔驰宝马") {
            this.checkList.splice(i, 1);
          }
          if (arr[i] == "飞禽走兽") {
            this.checkList.splice(i, 1);
          }
        }
        this.checkList = arr;
        this.hundredNum = 1;
      }
      this.changeShowList();
    },
    // 修改选中项
    changeShowList() {
      // console.log(this.checkList);
      let arr = [];
      let arr1 = this.checkList;
      for (let i = 0; i < arr1.length; i++) {
        arr.push(arr1[i]);
      }
      // console.log(arr)
      this.showList = arr;
    },
}
}

css

.typeIsGame {
  margin-top: 20px;
}
.game {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 12px 0;
  display: flex;
  text-align: left;
}
.game p {
  width: 80px;
  font-size: 14px;
  font-weight: bold;
}

菜鸟程序员一枚，写的还不够简洁，欢迎指点