select相关

multiple属性切换

el-select通过属性multiple来控制单选或多选，单独使用时单选和多选都没有问题，但在同一个上切换时会报错

vue.runtime.esm.js:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'value' of null"

found in

--->  at packages/select/src/select.vue
        at src/views/report/index.vue
          at src/layout/components/AppMain.vue
            at src/layout/index.vue
              at src/App.vue
               

推测在触发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
})