热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

解决ElementUI中Select组件创建条目为空时报错的问题

本文介绍如何在ElementUI的Select组件中使用allow-create属性创建新条目,并处理创建条目为空时出现的错误。我们将详细说明filterable属性的必要性,以及default-first-option属性的作用。

在Element UI的Select组件中,通过设置allow-create属性,用户可以在输入框中输入文字来创建新的条目。为了确保此功能正常工作,必须同时设置filterable属性为true。此外,default-first-option属性可以启用回车键直接选择第一个选项的功能。

<template><el-select v-model="value" multiple filterable allow-create default-first-option placeholder="请选择文章标签"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></-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-select v-model="developer" multiple filterable remote :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" multiple filterable remote :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(',');

修改后,整个表单提交和数据显示均正常。


推荐阅读
  • 本文详细介绍了Akka中的BackoffSupervisor机制,探讨其在处理持久化失败和Actor重启时的应用。通过具体示例,展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ... [详细]
  • 本文详细介绍了Java中org.neo4j.helpers.collection.Iterators.single()方法的功能、使用场景及代码示例,帮助开发者更好地理解和应用该方法。 ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • Android 渐变圆环加载控件实现
    本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]
  • 本文详细介绍了macOS系统的核心组件,包括如何管理其安全特性——系统完整性保护(SIP),并探讨了不同版本的更新亮点。对于使用macOS系统的用户来说,了解这些信息有助于更好地管理和优化系统性能。 ... [详细]
  • This guide provides a comprehensive step-by-step approach to successfully installing the MongoDB PHP driver on XAMPP for macOS, ensuring a smooth and efficient setup process. ... [详细]
  • 主要用了2个类来实现的,话不多说,直接看运行结果,然后在奉上源代码1.Index.javaimportjava.awt.Color;im ... [详细]
  • CentOS7源码编译安装MySQL5.6
    2019独角兽企业重金招聘Python工程师标准一、先在cmake官网下个最新的cmake源码包cmake官网:https:www.cmake.org如此时最新 ... [详细]
  • UNP 第9章:主机名与地址转换
    本章探讨了用于在主机名和数值地址之间进行转换的函数,如gethostbyname和gethostbyaddr。此外,还介绍了getservbyname和getservbyport函数,用于在服务器名和端口号之间进行转换。 ... [详细]
  • 本文详细介绍了如何构建一个高效的UI管理系统,集中处理UI页面的打开、关闭、层级管理和页面跳转等问题。通过UIManager统一管理外部切换逻辑,实现功能逻辑分散化和代码复用,支持多人协作开发。 ... [详细]
author-avatar
太阳神神神_890
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有