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

在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(',');

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