省市县回显赋值不成功解决方案

原创已于 2024-03-28 16:18:05 修改 · 370 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #elementui #javascript

于 2024-03-18 11:32:57 首次发布

文章讲述了在Vue.js项目中，如何使用ElementUI的Cascader级联选择器组件处理业务场景中的省市区选择问题，特别提到了`cascProps`和`checkStrictly`属性在确保回显赋值成功时的作用。

业务场景描述：只选择了省或是市区，回显赋值不成功

解决方案：

<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 的版本和具体实现有所不同，因此建议查阅最新的官方文档以获取最准确的信息和用法示例。