el-checkbox-group任何设置value和label

文档只写了一种显示什么提交的数据就是什么的写法
但后端有时返回给我们的是这样的数据

 [
    {
    
    
        value: 1,
        label: 'LPS主服务'
    },
    {
    
    
        value: 2,
        label: 'Nginx服务'
    },
    {
    
    
        value: 3,
        label: 'Memcached服务'
    },
    {
    
    
        value:4,
        label: 'Redis服务'
    },
    {
    
    
        value: 5,
        label: 'LibreOffice服务'
    }
],

后端要的是一个value的数组 而我们展示要用label
那么我们页面可以这样写

<template>
    <div class="app">
         <el-form-item label="请选择：">
           <el-checkbox-group
                 v-model="form.DeployedServices"
             >
                 <el-checkbox
                   v-for="city in cities"
                   :label="city.value"
                   :key="city.value"
                 >{
   
   { city.label }}
                 </el-checkbox>
             </el-checkbox-group>
         </el-form-item>
    </div>
</template>

<script>
export default {
     
     
    data() {
     
     
        return {
     
     
            form:{
     
     
                DeployedServices: []
            },
            cities: [
			    {
     
     
			        value: 1,
			        label: 'LPS主服务'
			    },
			    {
     
     
			        value: 2,
			        label: 'Nginx服务'
			    },
			    {
     
     
			        value: 3,
			        label: 'Memcached服务'
			    },
			    {
     
     
			        value:4,
			        label: 'Redis服务'
			    },
			    {
     
     
			        value: 5,
			        label: 'LibreOffice服务'
			    }
			],
        }
    }
}
</script>

这样就能实现展示和取值的分离了