思路：弃用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. 【逆向】使用IDA Python脚本自动化解密字符串数据

    前言 一个肚脑虫(Donot)APT组织的下载器样本,样本中的一些关键字符串数据需要使用指定函数进行动态解密.所以正好借此机会记录下怎么使用IDA Python脚本来解密字符串数据.使用IDA Pyt ...

  2. P4921 [MtOI2018]情侣？给我烧了！

    前言 情人节写的这道题,题目名称好符合我当时的心情. 题目链接 Luogu:P4921 解法 容斥 我们发现最后要求的结果是恰好 \(k\) 对情侣坐在一起的方案数,我们就不难想到去计算恰好 \(n- ...

  3. 【Delphi11】「Embarcadero.Delphi.11.0.v28.0.42600.6491.Lite.v17.0分享」

    [Delphi11]转存或下载后将后缀名".exe"删除即可,或者直接右击解压缩也可.「Embarcadero.Delphi.11.0.v28.0.42600.6491.Lite. ...

  4. 3月2号Android开发学习

    (2)视图基础 1.设置视图的高度 视图宽度通过属性Android:layout_width表达,视图高度通过属性android:layout_heigth表达,宽高的取值主要有以下三种 1.matc ...

  5. Redis各个客户端的对比

    [Spring RedisTemplate 的底层一开始使用Jedis.但是自从SpringBoot2开始,底层开始使用了Lettuce,故不算在内] [题外话:如果要使用Spring来集成对Redi ...

  6. jmeter设置支持https方法

    2020-2-26,疫情影响下第一天上班,今年想把自己学到的测试方面的知识记录下来,方便自己方便有需要的人,废话不多说,开启第一篇随笔,jmeter设置. 最近在测接口性能,涉及https的接口,不知 ...

  7. Springboot中使用枚举

    枚举映射数据库字段 配置枚举包扫描路径 mybatis-plus: # 扫描通用枚举 type-enums-package: com.xx.**.enums 方法一:@EnumValue 和 @Jso ...

  8. nginx中proxy_set_header Host $host的作用

    nginx配置upstream负载均衡后请求400,配置proxy_set_header Host $host成功.请问这是什么原理? proxy_set_header Host $host有什么作用 ...

  9. C语言初级阶段7——指针1

    C语言初级阶段7--指针1 地址与指针 1.地址:数据在内存中的存储位置编号,是一个常量. 2.指针:指针的本质就是地址. 指针变量的定义和声明 1.指针变量:存储的数据是地址. 2.定义方法:类型* ...

  10. numpy基本使用(一)

    一.简介  NumPy(Numerical Python) 是用于科学计算及数据处理的Python扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库. 二.数据结构  n ...