复选框的传值问题

复选框

一个产品参数下面有多个字段，主要的难点是，选中保存后，能够回显值。

代码如下

<span>产品必填字段</span>
<el-checkbox-group v-model="productRequiredFields">
<el-checkbox label="产品名称"></el-checkbox>
<el-checkbox label="所属分类"></el-checkbox>
<el-checkbox label="品牌"></el-checkbox>
<el-checkbox label="业务属性"></el-checkbox>
<el-checkbox label="税率"></el-checkbox>
<el-checkbox label="单位"></el-checkbox>
<el-checkbox label="ABC分类"></el-checkbox>
<el-checkbox label="名称2"></el-checkbox>
<el-checkbox label="型号"></el-checkbox>
<el-checkbox label="关键规格参数"></el-checkbox>
</el-checkbox-group>

• 这是一个复选框组，选中的值都放在这个v-model绑定的数组里面productRequiredFields;
  • 如何处理这个数组，让他在保存时能够回显里面的值；
    • 先要在data里面定义这个数组；

    	data() {
    	return {
    		form: {
    			isUniqueField: false,
    		},
    		**productRequiredFields: [],**
    		uniqueField: [],
    		saveLoading: false,
    	}
    },
    

    调用后端接口

    • 这个页面比较特殊，一打开页面就要调用接口；这个接口是假接口，真正的有数据的接口是里面的getParameters（）

    created() {     
    	this.getConfig()
    },
    

    • 先引入接口:

  import { getParameters, updateParameters } from '@/api/mes/product'
  

  • 在methods里面，对接口进行处理,真正的接口在里面：
    • 先打印出来看看接口里面都有什么数据 console.log({res});

      • res里面有很多值，但我们需要的是rows里面的： const { rows } = res

        • const { rows } = res 的写法就是const rows = res.rows

      • rows 是一个数组，里面只有一项所以 const data = rows[0]

      • data是一个对象，可以直接data.xxx取到里面的值

- 将代码后端返回的data.productRequiredFields，赋值给我们前端声明的productRequiredFields; - 我们前端是一个数组，后端要的是一个以逗号隔开的字符串； ``` methods:{ getConfig(){ getParameters().then(res=>{ console.log({res}) const { rows } = res const data = rows[0] let productRequiredFields = data.productRequiredFields this.productRequiredFields = productRequiredFields && productRequiredFields.split(',')

   })
}
}
```