解决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>
复制代码

 

 

 

 

posted @   菜鸟小何  阅读(1032)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
点击右上角即可分享
微信分享提示