思路：弃用el-checked-group使用el-checked模拟

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <!-- import CSS -->

  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">

</head>

<body>

  <div id="app">

    <div style="margin: 15px 0;"></div>

    <div v-for="city in cities">

      <el-checkbox  :label="city" :key="city.id" :checked=indexOf(city,checkedCities) @change=change(city,indexOf(city,checkedCities)) >{{city.name}}</el-checkbox>

    </div>

    {{ result }}

  </div>

</body>

<!-- import Vue before Element -->

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<!-- import JavaScript -->

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>

<script>

  new Vue({

    el: '#app',

    data: function () {

      return {

        checkAll: false,

        result:[],

        checkedCities: [{

            name: "上海",

            id: 1

          }],

        cities: [{

            name: "上海",

            id: 1

          },

          {

            name: "北京",

            id: 2

          }

        ],

        isIndeterminate: true

      }

    },

    created(){

      this.$nextTick(() => {

        this.result = this.checkedCities

      })

    },

    methods: {

      indexOf(item, items) {

        console.log(items.indexOf(item))

        items = JSON.stringify(items)

        item = JSON.stringify(item)

        if(items.indexOf(item) > -1 ){

          return true

        }else{

          return false

        }

      },

      change(e,c){

        if(c){

          this.result.forEach((value, index, array) => {

            if (e.id == value.id) {

              this.result.splice(index, 1)

            }

          })

        }else{

          this.result.push(e)

        }

      }

    }

  })

</script>

</html>

解决el-checked-group中v-medel绑定的是一个数组对象方法（不用修改源码）的更多相关文章

  1. 外部配置属性值是如何被绑定到XxxProperties类属性上的？--SpringBoot源码（五）

    注:该源码分析对应SpringBoot版本为2.1.0.RELEASE 1 前言 本篇接 SpringBoot是如何实现自动配置的?--SpringBoot源码(四) 温故而知新,我们来简单回顾一下上 ...

  2. Hadoop 修改源码以及将修改后的源码应用到部署好的Hadoop中

    我的Hadoop版本是hadoop-2.7.3, 我们可以去hadoop官网下载源码hadoop-2.7.3-src,以及编译好的工程文件hadoop-2.7.3, 后者可以直接部署. 前者hadoo ...

  3. c++实现游戏开发中常用的对象池（含源码）

    c++实现游戏开发中常用的对象池(含源码) little_stupid_child2017-01-06上传   对象池的五要素: 1.对象集合 2.未使用对象索引集合 3.已使用对象索引集合 4.当前 ...

  4. Spring中@Transactional事务回滚（含实例详细讲解，附源码）

    一.使用场景举例 在了解@Transactional怎么用之前我们必须要先知道@Transactional有什么用.下面举个栗子:比如一个部门里面有很多成员,这两者分别保存在部门表和成员表里面,在删除 ...

  5. MVC中使用SignalR打造酷炫实用的即时通讯功能附源码

    前言,现在这世道写篇帖子没个前言真不好意思发出来.本贴的主要内容来自于本人在之前项目中所开发的一个小功能,用于OA中的即时通讯.由于当时走的太急,忘记把代码拿出来.想想这已经是大半年前的事情了,时间过 ...

  6. Winforn中DevExpress的TreeList中显示某路径下的所有目录和文件（附源码下载）

    场景 Winform中DevExpress的TreeList的入门使用教程(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...

  7. Asp.net Core中SignalR Core预览版的一些新特性前瞻,附源码(消息订阅与发送二进制数据)

    目录 SignalR系列目录(注意,是ASP.NET的目录.不是Core的) 前言 一晃一个月又过去了,上个月有个比较大的项目要验收上线.所以忙的脚不沾地.现在终于可以忙里偷闲,写一篇关于Signal ...

  8. 在.NET Core中三种实现“可插拔”AOP编程方式（附源码）

    一看标题肯定会联想到使用动态编织的方式实现AOP编程,不过这不是作者本文讨论的重点. 本文讨论另外三种在netcore中可实现的方式,Filter(过滤器,严格意义上它算是AOP方式),Dynamic ...

  9. 解决Asp.net Mvc中使用异步的时候HttpContext.Current为null的方法

    在项目中使用异步(async await)的时候发现一个现象,HttpContext.Current为null,导致一系列的问题. 上网查了一些资料后找到了一个对象: System.Threading ...

  10. 解析opencv中Box Filter的实现并提出进一步加速的方案（源码共享）。

    说明:本文所有算法的涉及到的优化均指在PC上进行的,对于其他构架是否合适未知,请自行试验. Box Filter,最经典的一种领域操作,在无数的场合中都有着广泛的应用,作为一个很基础的函数,其性能的好 ...

随机推荐

  1. applicationContext.xml及springMVC.xml详解

    在前面的web.xml详解里,我们引入applicationContext.xml和springMVC.xml两个配置文件, 前者是spring 全局配置文件,用来控制spring 特性的, 后者则是 ...

  2. 项目实训 DAY 9

    加入页面之间定向的按钮,并改了一个typo

  3. mysql重新设置列的自增初始值

    alter table xxx auto_increment = 100; 因为设置了列的自增之后,若删除过一些行,下次再新增时还会从已删除的id算起自增,为了让数据看起来连续,可以重新设置自增起始值 ...

  4. Android中的特殊权限

    AndroidManifest中定义的权限分为普通权限,危险权限和特殊权限. 普通权限指的是不会威胁到用户的安全和隐私的权限,只需要在AndroidManifest中声明一下就能直接使用. 危险权限指 ...

  5. Android Native Code 手动调试

    调试启动过程中的 Android Native Code Crash 记录一下,最后成功使用的工具是 lldb + lldb-server,不需要 root 权限.我最先尝试使用的是,gdb + gd ...

  6. oracle 用户连接数查询

    oracle 用户连接数查询 --当前的连接数 select count(*) from v$session; --数据库允许的最大连接数 select value from v$parameter ...

  7. js数组原型方法

    今天学习了一下js数组原型的操作方法,小结一下学习地址https://www.cnblogs.com/obel/p/7016414.html 1.join() join(separator): 将数组 ...

  8. 4.Vue组件

    一.组件化开发概述 1.组件化开发思想 标准 分治:不同的功能分配到不同的组件中 重用: 组合 2.编程中的组件化思想体现 3.组件化规范: Web Components 我们希望尽可能多的重用代码 ...

  9. CV入坑

    https://www.cnblogs.com/fldev/p/14360149.html

  10. ORACLE 去重

    -----------------------------------------------------------------------------模拟数据------------------- ...