element的选择器组件,设置了checkStrictly属性后再使用多选时,手动设置回显的数据
时间: 2024-10-19 07:15:50 浏览: 62
vue组件表单数据回显验证及提交的实例代码
Element UI 的选择器组件,如 `el-select` 或者 `el-checkbox-group`,当你设置了 `checkStrictly` 属性为 `true` 后,意味着在进行多选时,如果数据状态和显示值不一致,会强制校验并保持一致性。如果你想要手动设置回显的数据,一般需要在组件的 `value` 或 `model` 变量上操作。
例如,假设你在 `data` 中有数组 `options`,你可以这样做:
```javascript
// 初始化时
this.options = ['选项A', '选项B', '选项C'];
this.selectedValues = this.options; // 如果你想完全匹配原始选项
// 当你需要更新回显数据时
this.selectedValues = ['选项B', '选项C']; // 更改为新的选中项
// 更新组件值
this.$refs.selectMultiple.checkStrictly = true; // 如果是 el-checkbox-group
this.$refs.select.checkStrictly = true; // 如果是 el-select
this.$set(this.$data, 'selectedValues', this.selectedValues); // 通过 Vue 的 $set 来确保视图更新
```
请注意,如果用户已经选择了其他选项并且不等于设置的新值,`checkStrictly` 设为 `true` 会导致原来的选中项失去选中状态。因此,在实际应用中,这通常用于数据驱动和验证场景。
阅读全文