问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

element ui中的循环出来的checkbox怎么能绑定不同的v-model？

头像
forGit
    1561412

    现在想要的效果是，选中或取消选中报名报名表单1中 ‘你’ 这个选项，对应报名表单2中的 ‘你’ 这个选项对应消失和出现，求大神解疑！！！给个思路也行啊。。。

    clipboard.png

    vue.jselement-ui
    阅读 12.9k
    4 个回答
    得票最新
    头像
    forGit
      1561412
      ✓ 已被采纳

      clipboard.png

      clipboard.png

      头像
      hcxowe
        1.4k1415
        <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)
          }
        })
      }
    }
        这种方式是否合适
        头像
        子不语
          31
          新手上路，请多包涵

          这个问题解决没有 需要绑定不同的值 但是动态循坏出来的 不知道会有多少个多选框啊

          头像
          小鬼web
            92531130
            <!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" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <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就出现。
            但我现在这个写法下面的列表顺序会乱掉，比如初始顺序是ABC，但经过操作之后会变成BAC,CAB之类的，
            如果你对顺序有要求那我再完善代码。

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题