Antd vue treeSelect树形控件道具treeCheckStrictly使用踩坑小记

如果在treeSelect中使用了treeCheckStrictly=true 会使得 labelInValue 强制为 [true]

(具体见)1x.antdv.com/components/…

customer 有个需求是让一个企业的部门树父子节点选中状态不再关联

即单独选择父节点 并不影响子节点

所有选择使用道具treeCheckStrictly=true

但是直接使用有个会出现问题  labelInValue 强制为 [true]

会把每个选项的 label 包装到 value 中，会把 value 类型从 string 变为 {value: string, label: VNode, halfChecked(treeCheckStrictly 时有效): string[] } 的格式

即value: 'b2043682ffd2413fac7481304cd7042d'------>

{ label: "2号检修班组", value: "b2043682ffd2413fac7481304cd7042d" }

因为value是后端给的，所以我们要进行修改，不然会报错

表单使用的是## v-decorator 我们需要用到this.form.setFieldsValue

 this.form.<a-input placeholder="请输入名称" v-decorator="['name', { rules: [{ required: true, message: '请输入名称!' }] }]"></a-input>

this.form.setFieldsValue(
   pick(
      {this.model, 
      target：data.target.map(item=>({
        value:item
         }))
      }
    )
  ) 
});

提交target参数的时候 用过滤改造回去list

 let arr = [{
            label: "2号hh班组",
            value: "b2043682ffd2413fac7481304cd7042d"
        }, {
            label: "嘻嘻嘻部门",
            value: "dbee5c20c0b1451d868532a65de6f155"
        }]
        let newArr = []
        let arr1 = arr.filter(function(value, index, arr) {
            if (arr[index].value) {
                newArr.push(arr[index].value)
            }
            return newArr
        })
        console.log(newArr);