VUE中form表单编辑，同时解决checkbox表格和TreeSelect树形选择器内容回显后无法勾选问题

form表单编辑+table表格选择行+树形选择器

template

<a-form-model-item label="测试场地" prop="areaId">
    <a-select allowClear placeholder="请选择测试场地" v-model='form.areaId'>
        <a-select-option v-for="(item, index) in testAreaList" :value="item.id" :key="item.index">{{item.name}}</a-select-option>
    </a-select>
</a-form-model-item>
<a-form-model-item label="测试内容" prop="contentTemp">
    <div class="treeContainer">
		<a-table v-if="testScene.length>0 && form.contentTemp" :columns="testSceneColumns"
			:row-selection="{
				selectedRowKeys: form.contentTemp,
				onChange: onSelectChange,
			}"
			:data-source="testScene" rowKey="id" size="small" :pagination="false"/>
	</div>
</a-form-model-item>
<a-form-model-item label="目标车辆" prop="targetVehicleTemp">
	<div class="treeContainer">
		<a-tree v-model="form.targetVehicleTemp"
	         checkable
	         :selected-keys="selectedKeys"
	         :checked-keys="checkedKeys"
	         :tree-data="targetVehicleList"
	         :default-checked-keys="form.targetVehicleTemp"
	         @select="onSelect"
	         @check="onCheck">
		 </a-tree>
	</div>
</a-form-model-item>

解决checkbox表格内容回显后无法勾选问题

注意：一定要在定义中声明form表单中的字段，否则会出现checkbox无法勾选上，但是可以传递所点击的行数据，即实际上的row-selection是存在的，但无勾选动作

data() {
    return {
       	testAreaList:[],
       	checkedKeys:[],
       	selectedKeys:[],
        form: {
            contentTemp: [],
            areaId: null,
            targetVehicleTemp: [],
            targetVehicleList:[{'title':1,'key':1},{'title':2,'key':2}]
        },
        rules: {
            areaId: [{ required: true, message: '测试场地不能为空', trigger: 'change' }],
            contentTemp: [{ required: true, message: '测试内容不能为空', trigger: 'change' }],
        },
        v2xScene: [],
    }
},

data

API.then((res) => {
	if(res.code === 0 && res.data){
	    let data = this.$funs.deepClone(res.data); //深克隆方法，自定义
	    this.form.areaId= data.areaId
	    this.form.contentTemp = data.contentTemp
	    this.form.targetVehicleTemp = data.contentTemp
	}
})

methods

onSelectChange(e){
	this.form.contentTemp = e;
},
onSelect(selectedKeys) {
    //this.selectedKeys = selectedKeys;
},
onCheck(checkedKeys) {
    this.checkedKeys = checkedKeys;
    this.form.targetVehicleTemp = checkedKeys
},
onSubmit() {
this.$refs.ruleForm.validate(valid => {
	if (valid) {
		API.then(res => {
	        if (res.code === 0) {
	            this.$notification.success({
	                message: '保存成功',
	                duration: 1
	            });
	        }
	    }).catch((err) => {
	        console.log(err)
	    }).finally(() => {
	        this.loadingBtn = false;
	    });
	}
})