文档只写了一种显示什么提交的数据就是什么的写法
但后端有时返回给我们的是这样的数据
[
{
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>
这样就能实现展示和取值的分离了