解决el-checked-group中v-medel绑定的是一个数组对象方法(不用修改源码)
思路:弃用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>
长风破浪会有时,直挂云帆济沧海
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!