element-ui中select组件创建条目创建条目为空时报错的解决方案

官方示例：
使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真。本例还使用了default-first-option属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。

<template><el-selectv-model="value"multiplefilterableallow-createdefault-first-optionplaceholder="请选择文章标签"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script>export default {data() {return {options: [{value: 'HTML',label: 'HTML'}, {value: 'CSS',label: 'CSS'}, {value: 'JavaScript',label: 'JavaScript'}],value: []}}}
</script>

注意：创建条目这里一定要创建数组，因为这里展示是按数组展示的。（下面会考）
因为这里需求不需要新添加条目，所以把allow-create这个属性去掉了

<el-form-item label="开发人员" style="margin-bottom:0"><el-selectv-model="developer"multiplefilterableremote:allow-create="false"placeholder="请输入开发人员":remote-method="developerRemote":loading="loading"><el-option v-for="v in developerItem":key="v.uid":value="v.uid":label="`${v.userName}(${v.uid})`" /></el-select>
</el-form-item>
<el-form-item label="测试人员" style="margin-bottom:0"><el-select v-model="tester"multiplefilterableremote:allow-create="false"placeholder="请输入测试人员":remote-method="testerRemote":loading="loading"><el-option v-for="v in testerItem":key="v.uid":value="v.uid":label="`${v.userName}(${v.uid})`" /></el-select>
</el-form-item>

developer: [],
developerItem: [],
tester: [],
testerItem: []

这里注明一下，上传时后台需要的是一个字符串，因此在表单提交的时候，要把数组转成字符串。

developer: this.developer.join(','),
tester: this.tester.join(',')

展示的时候：

this.developer= res.developer.split(',');
this.tester = res.tester.split(',');

因此这里就出现了问题，如果后台没有数据的时候，返回的是一个空字符串""，显示就变成了这个样子

因此做了一步非空校验

this.developer = this.developer == '' ? '' : res.developer.split(',');
this.tester = this.tester == '' ? '' : res.tester.split(',');

显示是正常了，但是当选取值的时候，又出现了bug

于是这里才注意到上面的那个定义问题，其实最开始developer 和tester 我定义的是字符串，为了跟后台一直，最后才才成空数组[]去定义的，所以这里非空校验的时候，当数据为空时，应该是空数组。

this.developer = res.developer == '' ? [] : res.developer.split(',');
this.tester = res.tester == '' ? [] : res.tester.split(',');

修改后整个表单提交就OK了。

element-ui中select组件创建条目创建条目为空时报错的解决方案相关推荐

关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
element ui中select 下拉框在火狐浏览器最后一行显示不完全（谷歌正常）
在项目开发的时候用到了el-scrollbar组件并且设置了隐藏横向滚动条下面展示一些内联代码片. // 隐藏横向滚动条 .el-scrollbar__wrap {overflow-x: hid ...
【关于Element UI中el-autocomplete组件】一、el-autocomplete组件添加底部固定按钮
小伙伴们,不知道大家再开发过程中使用el-autocomplete时候会不会遇到需要在下拉建议值中加入自定义按钮,例如添加按钮之类的,如图: 那么这个按钮是如何加上去的呢? 首先我们在这个建议值列表中 ...
vue中element ui 中tree组件怎么自定义前缀图标呢?
一问题饿了么ui 默认的图标样式是: 1. 一个箭头, 展开自动顺时针旋转90°, 以上的条件是该节点有子节点, 2. 如果是没有子节点的节点, 是默认空白图标的(这里我认为他不是没有, 而是有占 ...
element ui 中 Popover 组件定位不精准的问题
问题原因 Popover 内部数据动态获取到之后,Popover 尺寸变化导致的定位不准确. 解决方法动态数据获取到之后,调用 Popover 的 updatePopper() 方法重新计算 Pop ...
element ui中select 下拉选择文字输入筛选
未修改代码前效果选择框中不可编辑如图:加入 filterable allow-create default-first-option 代码如下 <template><div> ...
element UI上传图片Upload组件使用图片转base64和fale文件处理 formdata数据格式的应用
element UI上传图片Upload组件使用 & 图片转base64和fale文件处理 & formdata数据格式的应用 1.element UI上传图片Upload组件使用效 ...
Element UI（桌面组件库）之三大灵魂拷问
1. 什么是Element UI 概述 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供 ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...

element-ui中select组件创建条目创建条目为空时报错的解决方案

element-ui中select组件创建条目创建条目为空时报错的解决方案相关推荐

最新文章

热门文章