需求为下拉多选,然后回车调接口创建新条目,element-plus移除了$ref.xx.createdLabel去拿到新创建的条目,折中办法,change事件后请求原下拉进行比较,找出不同的进行插入:
const tagChange = async (val: string[]) => {
console.log(val)
//官方坑:element plus移除createdLabel 新增选项无法判断 请求接口比较
await getTag()
//获取服务端Tag列表
const currentTagList = tagOptions.value.map((item: Tag) => item.tagId)
//筛选掉当前已存在的tag
const differentList = val.filter((item: string) => !currentTagList.includes(item))
if (differentList.length) {
//不存在的就去新增
differentList.map((ele) => {
createTag(ele)
})
}
}
创建接口拿到最新的下拉之后记得把v-model值的label替换成value:(比如输入张三会保存为张三,需要请求创建标签后的列表匹配一下张三对应的value)
const createTag = async (tagName: string) => {
try {
const { code } = await addTagApi({ tag: tagName })
if (code === 200) {
await getTag()
//查找当前表单中的这个tag 记录下标
const index = leftForm.value.tagContent.findIndex((item: string) => item === tagName)
//查找执行添加tag后在下拉列表中的目标tag
const currentTag = tagOptions.value.find((item: Tag) => item.tag === tagName)
if (index !== -1 && currentTag) {
//将当前表单中的label替换成id
leftForm.value.tagContent[index] = currentTag.tagId as string
}
} else {
ElMessage.error("创建标签失败")
//失败移除当前表单中的label
const index = leftForm.value.tagContent.findIndex((item: string) => item === tagName)
leftForm.value.tagContent.splice(index, 1)
}
} catch (err) {
console.log(err)
}
}