在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ element ui中的循環(huán)出來(lái)的checkbox怎么能綁定不同的v-model

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

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

clipboard.png

回答
編輯回答
久礙你

clipboard.png

clipboard.png

2017年9月4日 15:04
編輯回答
老梗

這個(gè)問(wèn)題解決沒(méi)有 需要綁定不同的值 但是動(dòng)態(tài)循壞出來(lái)的 不知道會(huì)有多少個(gè)多選框啊

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
編輯回答
真難過(guò)
<!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" >
    <!-- 引入組件庫(kù) -->
    <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>

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

2018年2月16日 09:53