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

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

clipboard.png

回答:

clipboard.png

clipboard.png

回答:

<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)
          }
        })
      }
    }
这种方式是否合适

回答:

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

回答:

<!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之类的,
如果你对顺序有要求那我再完善代码。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注