ElementUI多选框，选中时传id

最近需要完成一个这样的效果，

在多选框中选中后需要的不是label而是传相应的id，看了一下官方文档并没有这样的写法，之前select选择器的时候就有了label和value互相切换的操作，所以借鉴一下，没想到成了，代码如下。

<template>
  <div class="layerManegement">
  <div class="headAdd">选择图层添加或移除</div>
  <hr>
  <el-checkbox-group v-model="checkedOptions" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="item in layers" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
  </el-checkbox-group>
  </div>
</template>
<script>
import Api from '@/api/Index.js'
export default {
  name: 'layerManegement',
  data () {
    return {
      checkAll: false,
      checkedOptions: [], 
      layers: [{
        value: '',
        label: ''
      }],
      isIndeterminate: true
    }
  },
  mounted () {
    this.findLayerList() // 调用接口
  },
  methods: {
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.layers.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.layers.length
      this.$emit('handle-change-layer', this.checkedOptions)  //我这里需要将值传给父组件所以用了emit
    },
    findLayerList () {
      Api.findLayerList()
        .then(data => {
          if (data.status === 0) { 
            this.layers = [] 
            this.layers = data.data                
          } else {
            this.$message({
              type: 'warning',
              message: '获取数据失败'
            })
          }
        })
        .catch(res => {
          this.$message({
            type: 'error',
            message: '请求数据失败'
          })
        })
    }
  }
}

</script>
<style lang="scss">
.layerManegement {
  width: 100%;
  .headAdd {
    color: white;
  }

}

</style>