思路：弃用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. AX2012 去掉浮点数后面的0

    static void Job116(Args _args) { str string1; real num1; ; num1 = 0.00; string1 = System.String::For ...

  2. <魔域之书> Roguebook 存档修改器

    魔域之书 这个多周目游戏还挺不错的,游戏是Unity3d做的,网上没有找到现成的修改器,自己用CE修改的话,由于是基于虚拟机的游戏,在Dnsyp中看了,源码,游戏数据都存在不同的 Observable ...

  3. nodejs 配置国内镜像

    npm config set registry https://registry.npm.taobao.org npm config set disturl https://npm.taobao.or ...

  4. 如何运用Vue自定义组件以及组件的传值

    Vue自定义组件 引入组件 首先在项目内的components新建.vue文件. 创建完成之后搭建完整的框架.其实就是新建组件,在此之前,需要在VScode中引入一个插件(vue 2 snippets ...

  5. redis 常用指令

    redis指令有些相似,记忆起来不太容易,在此做一下整理 序号 类型 指令 参数 作用 例子 1 string set key value 存储一个 string 类型的值 set a aa 2 st ...

  6. Shell写脚本关于ssh执行jar包，需要刷新JDK路径的问题

    比如脚本中下面这一段 ssh $i "java -jar /applog/$PROJECT/$APPNAME --server.port=$SERVER_PORT >/dev/null ...

  7. SpringBoot为什么是默认单例的：

    好处: 1)提升性能,减少了新生成实例的消耗 新生成实例消耗包括两方面,第一,spring会通过反射或者cglib来生成bean实例, 其次,给对象分配内存也会涉及复杂算法,这些都是消耗性能的操作. ...

  8. AD使用积累 - 板子上开孔的方法

    有时候画板子时需要需要在板子上开一些槽孔,可以参考如下两种方法: 第一种方法:封闭曲线转换为槽孔. 1.在机械层画一个封闭图形或者画一根线: 2.选中这个图形或线,选择工具 - 转换 - 以选中的元素 ...

  9. elasticsearch开发学习及踩坑实录

    1.elasticsearch7.+需要jdk11 / elasticsearch6.+需要jdk8 , 如果是Java开发的同学本地开发使用jdk8 , 可以下载一个解压版的jdk11 , 然后修改 ...

  10. 2.Vue模板语法

    1.模板语法的概述 (1)如何理解前端渲染 将数据填充到HTML标签中,生成静态的HTML内容 2.前端渲染方式 (1)原生JS拼接字符串 (2)使用前端模板引擎 (3)使用Vue特有的模板语法 3. ...