思路:弃用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. 随机生成不重复的几个数(Unity)

    using System.Collections.Generic; using UnityEngine; /// <summary> /// 随机数管理类 /// </summary ...

  2. NPM镜像代理设置

    用户目录C:\Users\xxx下建立.npmrc文件,内容如下: registry="https://registry.npm.taobao.org" ELECTRON_MIRR ...

  3. MySQL错误合集

    Error Code: 1052. Column 'Sno' in field list is ambiguous ambiguous意味含糊不清,常见于多个表中有相同名字的属性,在查询时需要分别说明 ...

  4. Tomcat启动—本地文件夹

    打开tomcat文件夹 打开bin目录 在路径这里输入cmd 就可以直接跳转到当前页面下 接下来我们在cmd命令中启动startup.bat (记得设置java环境变量) 这里我没设置utf-8 我无 ...

  5. L0范式、L1范式、L2范式解释通俗版

    L0范数是指向量中非0的元素的个数.(L0范数很难优化求解) L1范数是指向量中各个元素绝对值之和 L2范数是指向量各元素的平方和然后求平方根 L1范数可以进行特征选择,即让特征的系数变为0. L2范 ...

  6. Hbase操作与编程使用

    1.任务: 列出HBase所有的表的相关信息,例如表名: 3. 编程完成以下指定功能(教材P92下): (1)createTable(String tableName, String[] fields ...

  7. unity shader 描边

    https://zhuanlan.zhihu.com/p/66282034   这个是将整个模型放大 在世界坐标操作 https://blog.csdn.net/ToToTofu/article/de ...

  8. Centos8 中安装GitLab

    Centos8 中安装GitLab 1,安装依赖 yum install -y curl policycoreutils-python openssh-server centos8没有policyco ...

  9. IDEA Maven 项目报错 java: 程序包org.springframework.beans.factory.annotation不存在

    idea 刚把项目导进去的时候,点击运行,import的好多包都报红,所有的文件的Maven依赖包都没导入进去. 但只是第一个报错是: java: 程序包org.springframework.bea ...

  10. k8s介绍和学习思路

    1. Kubernetes介绍 Kubernetes是一个完备的分布式系统支撑平台.具备完备的集群管理能力,包括多层次的安全防护和准入机制.多租户应用支撑能力.透明的服务注册和服务发现机制.内建的智能 ...