业务场景描述:只选择了省或是市区,回显赋值不成功
解决方案:
<el-col :span="12">
<el-form-item prop="region">
<el-cascader
v-model="form.region"
:props="cascProps"
placeholder="省/市/县"
:options="RegionArr"
clearable
:disabled="isDisab"
/>
</el-form-item>
</el-col>
cascProps: {
value: 'value',
label: 'label',
checkStrictly: true // 选择器会严格地按照父子关系进行值的关联,父节点的选择状态不会影响到子节点
},
:props="cascProps"
是在 Vue.js(一个流行的前端框架)中用于绑定属性(props)的语法。这里的冒号(:
)是 v-bind
的简写,它用于动态地绑定一个或多个属性,或一个组件的 prop 到表达式。
在这个特定的例子中,:props="cascProps"
意味着将 cascProps
这个对象(或可能的其他类型的数据)绑定到某个组件的 props
属性上。这样,组件就可以接收并使用 cascProps
中定义的数据或配置。
checkStrictly
是 Element UI 中 Cascader 级联选择器组件的一个属性。这个属性用于控制父子节点选中状态是否关联。当 checkStrictly
为 true
时,父子节点的选中状态将不会关联,也就是说,选中子节点时,父节点不会被自动选中,反之亦然。
在单选模式下,如果只想选择叶子节点而不希望自动选中其父节点,可以将 checkStrictly
设置为 true
。这样,用户就可以自由地选择任意一级的选项,而无需受到父子节点选中状态的限制。
此外,checkStrictly
属性在多选模式下也非常有用,因为它允许用户独立地选择多个不同层级的节点,而不会触发其他节点的自动选中或取消选中。
请注意,checkStrictly
属性的具体用法可能会根据 Element UI 的版本和具体实现有所不同,因此建议查阅最新的官方文档以获取最准确的信息和用法示例。