select相关

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
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 概述 select指令实现的是下拉框的功能,一般会配合option指令以及ng-model指令使用。在select...
    yb_剑笙阅读 875评论 0 0
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,337评论 0 6
  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 6,188评论 0 42
  • 专业考题类型管理运行工作负责人一般作业考题内容选项A选项B选项C选项D选项E选项F正确答案 变电单选GYSZ本规程...
    小白兔去钓鱼阅读 10,314评论 0 13
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 3,484评论 0 3

友情链接更多精彩内容