element checkbox

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.0/lib/index.js"></script>
<div id="app">
   <el-checkbox v-model="isCheckAll" @change="handleCheckAllChange">全选</el-checkbox>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.name}}</el-checkbox>
  </el-checkbox-group>
</div>

const cityOptions =  [{id:1,name:'上海'}
                 ,{id:2,name:'北京'}
                 ,{id:3,name:'广州'}
                 ,{id:4,name: '深圳'}]; 
const checkedOptions=[1,2]
var Main = {
    data() {
      return {
        cities:cityOptions,
        checkedCities: checkedOptions,
        isCheckAll: cityOptions==checkedOptions,
      };
    },
    methods: {
      handleCheckAllChange(val) {
        var allids=new Array()
        for(var i=0;i<cityOptions.length;i++){
          allids[i]=cityOptions[i].id
        }
        this.checkedCities = val ? allids : [];
        console.log(this.checkedCities);//显示选中内容
      },
      handleCheckedCitiesChange(value) {
        this.isCheckAll=value.length==cityOptions.length
        console.log(this.checkedCities);//显示选中内容
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')