element-ui el-select 多选单选切换报错问题

项目需求 后台表单是前台自建的 控件自然也要自建 自然就有各种选项

其中选择框 就有单选多选选项 项目使用的element-ui 自然就用的el-select

由于数据库并没有类似数组的字段 选择框使用varchar 而el-select多选时却需要使用数组 所以在编辑时 需要将值转成数组再赋值给el-select的value 

data根据控件属性 control.multiple 动态计算

由于我们的数组数据是使用逗号分隔符 所以直接使用String可以提交数据就可以 单选多选的时候 都可以提交正确的数据

单独使用的时候 多选单选都没有问题 但是由于配置的时候 需要实时切换 切换的时候 就报了错

errorLog.js:17 TypeError: Cannot read property 'value' of undefined
    at VueComponent.getValueKey (index.js:1)
    at Proxy.boundFn (vue.esm.js:188)
    at index.js:1
    at Proxy.renderList (vue.esm.js:3673)
    at Proxy.n (index.js:1)
    at VueComponent.Vue._render (vue.esm.js:4437)
    at VueComponent.updateComponent (vue.esm.js:2755)
    at Watcher.get (vue.esm.js:3105)
    at Watcher.run (vue.esm.js:3182)
    at flushSchedulerQueue (vue.esm.js:2944) "render"

错误栈都在Vue内部  

查看el-select源码（element\packages\select\src\select.vue ）后 推测应该是触发multiple更改后value值还未计算 select已经开始响应渲染 而此时value值还未被计算成数组 导致内部出错

查看官方文档后并未发现有multiple动态更改的方法，也不好大改el-select控件 随后想到可以在更改multiple后重新渲染组件

查看官方文档  可使用 $forceUpdate  强制更新组件 

使用后发现 效果并不理想 原因 $forceUpdate  只能控制重渲染 并不能控制渲染过程

 

虽然该错误并不多影响实际使用 一个好的猴子不能就此放弃

随后想到可以使用v-if控制渲染 在multiple改变时停止渲染 待value计算完毕后重新渲染组件 

由于javascript是队列机制 可以使用setTimeout 将函数推至队列末尾 即可实现value计算后重新渲染组件

由于只有在编辑控件的时候 才会触发重新渲染 所以在实际使用中并不会触发 不会有性能问题

完美解决 

总结 

善用setTimeout 0  遇到解决不了的问题 可以通过翻阅文档、源码、另辟蹊径等方法解决