思路：弃用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. matlab读写文件

    dsp,fpga这些产生的文件大部分都是二进制存储的,知道格式后可以直接读取. 读取后的"可懂"数据如何以"可懂"的形式保存在.dat,.txt,.csv之类文 ...

  2. AX2012 快速清空整个log表数据

    如果当一个log表的数据非常大的时又需要清理时,如果允许删除全部数据,在AX里,可以 将log表的TableType调整为[TempDB], 保存同步后再将TableType设置回[Regular]即 ...

  3. Jmeter五、jmeter中的逻辑控制器

    1.simple controller 提供一个块的结构和控制.更方便,更清晰. 嵌套其他的controller 2.loop controller 循环控制器 控制循环次数 可以使用变量 ${__t ...

  4. Redis Template部分接口学习记录

    Redis Template是操作redis的一个封装模板,让我们更加简便的去操作redis. 操作键类型的接口: GeoOperations Redis的地理空间操作,如GEOADD,GEORADI ...

  5. Spring-IoC中Set和构造器注入

    新建Maven工程 修改pom文件 1 <?xml version="1.0" encoding="UTF-8"?> 2 <project x ...

  6. 关于group by的一个问题

    项目场景: 有时候,遇到数据库重复数据,需要将数据进行分组,并取出其中一条来展示,这时就需要用到group by语句.但是,如果mysql是高版本,当执行group by时,select的字段不属于g ...

  7. linux 串口查看信息

    查看串口是否可用,可以对串口发送数据比如对com1口,echo helloworld >/dev/ttyS0 [root@H3LINUX90 ~]# echo helloworld >/d ...

  8. DPDK在虚拟机上运行时，报错: Ethdev port_id=0 requested Rx offloads 0xe doesn't match Rx offloads capabilities 0x82a1d in rte_eth_dev_configure()

    这个错误是因为RX_OFFLOAD与TX_OFFLOAD可能不支持IPV4_CKSUM的检验 解决办法: 1,在配置中注释掉 DEV_RX_OFFLOAD_CHECKSUM 2,在代码中关闭 DEV_ ...

  9. hdu:排列组合（指数型母函数）

    Problem Description有n种物品,并且知道每种物品的数量.要求从中选出m件物品的排列数.例如有两种物品A,B,并且数量都是1,从中选2件物品,则排列有"AB",&q ...

  10. IntelliJ IDEA 2021.2 暴力破解

    注意 本教程适用于 IntelliJ IDEA 2021.2 以下所有版本,请放心食用~ 本教程适用于 JetBrains 全系列产品,包括 Pycharm.IDEA.WebStorm.Phpstor ...