multiple属性切换
el-select通过属性multiple来控制单选或多选,单独使用时单选和多选都没有问题,但在同一个上切换时会报错
vue.runtime.esm.js:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'value' of null"
found in
---> <ElSelect> at packages/select/src/select.vue
<Report> at src/views/report/index.vue
<AppMain> at src/layout/components/AppMain.vue
<Layout> at src/layout/index.vue
<App> at src/App.vue
<Root>
推测在触发multiple改变时,value的值还未被重新计算(单选时value是string,多选时是array),select已经开始响应渲染,导致内部出错。
因为我这里el-select的multiple是由另一个控件的值联动的,因此在控制组件的值改变时,将此组件的值设为空字符串''或空数组[]
这里遇到了新的问题,切换时placeholder没有显示且切换前的值会显示(但并不是真实的值),猜测还是渲染的时机问题,在网上搜索相关信息,看到有提出通过v-if和setTimeout 0来控制渲染,在multiple改变时通过v-if控制停止渲染,待value计算完毕后重新渲染组件 由于javascript是队列机制 可以使用setTimeout 将函数推至队列末尾 即可实现value计算后重新渲染组件,由于只有在编辑控件的时候 才会触发重新渲染 所以在实际使用中并不会触发 不会有性能问题。依照此方法,可正常使用,但是会闪烁,体验不佳
这时,想到了nextTick,作用是将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新,问题解决。
获取select label的值
this.$nextTick(function() {
const label= this.$refs.select.selectedLabel
})