思路：弃用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. win电脑查看wifi密码的方法

    1.使用电脑连接需要查看的WiFi,鼠标右击电脑桌面右下角[WiFi图标],在弹出的菜单中点击[打开"网络和internet"设置]. 2.在弹出的设置窗口中点击[网络和共享中心] ...

  2. java.io.IOException: Cannot run program "phantomjs": CreateProcess error=2, 系统找不到指定的文件

    一.问题 运行该指令的程序找不到phantomjs这个指令 二.解决 1.配置全局变量 注意!!! 要配置系统变量,只配置用户变量,可能还会出现该错误.ps:我就是只配置用户变量,导致一直出错... ...

  3. C# POST GET请求方式汇总

    /// <summary> /// POST方式提交 application/json /// </summary> /// <param name="post ...

  4. miou

    1. 前言 本文学习记录了机器学习中的分类常见评价指标以及分割中的MIoU. 主要有以下概念:Accuracy, Precision, Recall, Fscore,混淆矩阵,IoU及MIoU. 2. ...

  5. 打开CMD的方式

    打开Cmd的方式: 1.开始+系统+命令提示符 2.Win键+R 3.在任意文件夹下,按住Shift键+鼠标右键点击,在此处打开命令行窗口 4.资源管理的地址栏前面加上Cmd路径 管理员运行方式 :系 ...

  6. jsp第4个作业（1）

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

  7. Java基础进阶内容 - 随笔

    JAVA进阶 1 对象序列化 1.1 对象要序列化要实现Serializable接口 1.2 然后通过ObjectInputStream 对象读入流来读入一个对象 new ObjectOutputSt ...

  8. nodejs 连接MSSQL数据库 Setting the TLS ServerName to an IP address is not permitted by RFC 6066. This will be ignored in a future version

    初学nodejs连接lmssql数据库,测试报错,查了很多资料,最后发现报这个错主要是mssql不支持https安全连接,如果不考虑这个,仅做测试连接,就很容易,直接改个参数就可以了: const s ...

  9. java 循环删除数据写法

    import java.util.ArrayList;import java.util.ConcurrentModificationException;import java.util.List;// ...

  10. 【javascript】关于charCodeAt()方法

    在做算法题目leetcode 2283时,看见某些答案会使用charCodeAt(),因为自己没用过,所以作此纪录 描述在 JavaScript 中,charCodeAt() 是一种字符串方法,用于检 ...