如何为kendo-multiselect组件设置预选中的默认值

核心问题排查 #

你的原有写法存在两个错误：

• 你为组件配置了*:value-primitive="false"*，该配置表示组件绑定值为完整的数据源对象，你传入字符串"Scheduled"无法匹配到对应选项
• 在Vue项目中使用jQuery获取组件实例的方式容易出现时机问题（组件未完成渲染就调用API导致报错），更推荐使用自带的ref属性获取实例

正确实现方式 #

方案1：直接操作v-model绑定值（最推荐） #

不需要调用任何组件API，直接给v-model绑定的JobStatusFilter变量赋值即可，Vue响应式会自动处理选中状态，注意赋值格式为匹配的对象数组：

// 请在数据源JobStatusFilterDatas加载完成后执行
this.JobStatusFilter = this.JobStatusFilterDatas.filter(item => item.value === 'Scheduled')

方案2：调用组件API实现 #

如果需要手动调用组件方法，使用你代码中已经声明的ref属性获取实例，同样传入对象数组格式的选中值：

// 保证组件已挂载、数据源加载完成后执行
const multiSelectWidget = this.$refs.jobStatusSelect.kendoWidget()
const targetOption = this.JobStatusFilterDatas.find(item => item.value === 'Scheduled')
multiSelectWidget.value([targetOption])

注意事项 #

如果你的JobStatusFilterDatas是异步接口返回的数据，必须等数据源赋值完成后再执行上述选中逻辑，否则会因为选项未加载导致匹配失败。

内容的提问来源于stack exchange，提问作者M Jasso