ant-design-vue checkbox checked不生效

ant-design-vue checkbox checked不生效

https://segmentfault.com/q/1010000018981910

功能要求根据后台返回的数据，显示成几组checkbox，编辑时要根据返回的数据反显。因为保存时后端要前端给他 label的中文值，英文值，checkbox的option项的中文值英文值，对于我这种小渣渣还是挺费劲的，导致好不容易能保存成功数据，但反显时要么不显示，要么显示后不能再更改。经查证

不能反显的原因是：每个option拼接的value值“英文名称-中文名称”，有时就不太能识别，所以要仔细对比 返回的value值和checbox中的value值是否一致，数据类型是否一样。

另一点需要注意的是，a-checkbox默认选中使用checked，defaultChecked；而a-checkbox-group使用value，defaultValue！！！！a-checkbox-group中使用checked和defaultChecked不生效！！！！！

显示后不能更改：是我在checkbox中使用了:value属性而不是:defaultValue属性，使用value，选中的checkbox不能再更改了，使用defaultValue表示初始默认值，后面可以根据需要再更改选择。

一、checkbox

1、checkbox基本用法

/* checkbox */
<template>
  <a-checkbox @change="onChange">
    Checkbox
  </a-checkbox>
</template>
<script>
export default {
  methods: {
    onChange(e) {
      console.log(`checked = ${e.target.checked}`);
      console.log(`checked = ${e.target.value}`);
    },
  },
};
</script>

初始默认选中使用defaultChecked="true"。checked也是选中，但选中后不能更改。

禁止选择disabled

二、checkbox group

2、Checkbox Group基本用法

<template>
  <div>
    <a-checkbox-group :options="plainOptions" :default-value="['Apple']" @change="onChange"/>
</a-checkbox-group>
    <br />
    <a-checkbox-group :options="options" :value="['Pear']" @change="onChange" />
  </div>
</template>
<script>
const plainOptions = ['Apple', 'Pear', 'Orange'];
//这种格式也可以
const options = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange' },
];

export default {
  data() {
    return {
      plainOptions,
      options,
      value: [],
    };
  },
  methods: {
    onChange(checkedValues) {
      console.log('checked = ', checkedValues);
      console.log('value = ', this.value);
    },
  },
};
</script>

默认初始选中使用:defaultValue = "['***', '###']"

使用value后，选中的值不能更改。

禁止选择使用disabled

change事件的默认参数是已选择项组成的数组，类似['Apple', 'Pear']

如果需要其他参数需要自定义

<div v-for="(item, index) in productForm.attrList" :key="index" style="margin-bottom: 20px">
    <a-row>
        <a-col :span="5" >
            <label style="float: right">{{item.nameCn}}({{item.nameEn}})：</label>
        </a-col>
        <a-col :span="19">
            <a-checkbox-group  @change="attrChange($event, item.nameEn, index)">
                <a-checkbox v-for="(option, dex) in item.valueList" :value="option.attributeEnVal" :key="dex">{{option.attributeCnVal}}</a-checkbox>
            </a-checkbox-group>
        </a-col>
    </a-row>
</div>


// js
attrChange(checkedList, label, index){
    //checkedList:已选择项组成的数组; lable:每个a-checkout的label名称；index:第几个a-checkout
    console.log('onchage', checkedList, label, index); 
},