解决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 @ 2020-07-30 16:56  菜鸟小何  阅读(1021)  评论(0)  编辑  收藏  举报