element ui中的循環(huán)出來的checkbox怎么能綁定不同的v-model？

現(xiàn)在想要的效果是，選中或取消選中報名報名表單1中 ‘你’ 這個選項，對應報名表單2中的 ‘你’ 這個選項對應消失和出現(xiàn)，求大神解疑?。?！給個思路也行啊。。。

回答

編輯回答

久礙你

2017年9月4日 15:04

編輯回答

老梗

這個問題解決沒有需要綁定不同的值但是動態(tài)循壞出來的不知道會有多少個多選框啊

2018年4月18日 15:39

編輯回答

落殤

<template>
  <el-checkbox-group v-model="checkList1" @change="onChange1">
    <el-checkbox label="A"></el-checkbox>
    <el-checkbox label="B"></el-checkbox>
    <el-checkbox label="C"></el-checkbox>
  </el-checkbox-group>
  <el-checkbox-group v-model="checkList2" @change="onChange2">
    <el-checkbox label="A"></el-checkbox>
    <el-checkbox label="B"></el-checkbox>
    <el-checkbox label="C"></el-checkbox>
  </el-checkbox-group>
</template>

data () {
      return {
        checkList1: ['A'],
        checkList2: ['B'],
      };
    },
    methods: {
        onChange1: function(val) {
          val.forEach((el) => {
            let pos = this.checkList2.indexOf(el)
          if (~pos) {
              this.checkList2.splice(pos, 1)
          }
        })
      },
      onChange2: function(val) {
          val.forEach((el) => {
            let pos = this.checkList1.indexOf(el)
          if (~pos) {
              this.checkList1.splice(pos, 1)
          }
        })
      }
    }

這種方式是否合適

2018年8月4日 23:35

編輯回答

真難過

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <!-- 引入樣式 -->
    <link rel="stylesheet" >
    <!-- 引入組件庫 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body>
    <div id="app">
        <el-checkbox-group v-model="checkList1" @change="onChange1">
            <el-checkbox v-for="item in List1" :label="item"></el-checkbox>
        </el-checkbox-group>
        <el-checkbox-group>
            <el-checkbox v-for="item in List2" :label="item"></el-checkbox>
        </el-checkbox-group>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    List1: ['A', 'B', 'C'],
                    List2: ['A', 'B', 'C'],
                    checkList1: [],
                    checkList2: [],
                };
            },
            methods: {
                onChange1() {
                    this.List1.forEach((item) => {
                        let index1 = this.checkList1.indexOf(item);
                        let index2 = this.List2.indexOf(item);
                        if(index1 > -1){
                            if(index2 > -1){
                                this.List2.splice(index2,1);
                            }
                        }else{
                            if(index2 == -1){
                                this.List2.push(item);
                            }
                        }
                    })
                }
            },
        })
    </script>
</body>

</html>

這個樣子應該是滿足你的需求的吧？上面選A下面A就消失，上面取消選A下面的A就出現(xiàn)。
但我現(xiàn)在這個寫法下面的列表順序會亂掉，比如初始順序是ABC，但經(jīng)過操作之后會變成BAC,CAB之類的，
如果你對順序有要求那我再完善代碼。

2018年2月16日 09:53