网站单页设计上海推广网络营销咨询热线

问：

现在有一个el-select，

后端接口返回数据为keyword:'xxx',referenceNum:1,tagId:'132sf32fasdfaf'组成的数组，

现在select是多选，

但是但我选择多个下拉框选项后，后端需要前端返回的数据tagIds字段需要时一个字符串，比方：'132sf32fasdfaf,132sf32fasdfaf,132sf32fasdfaf'这样的字符串，中间逗号要是英文的逗号请问怎么写？我使用的是vue3的setup语法

[{'keyword': 'sdfafdaasd8164561','xxx': 'xxx','xxx': 'xxx',},{'keyword': 'sdfafdaasd8164561','xxx': 'xxx','xxx': 'xxx',},{'keyword': 'sdfafdaasd8164561','xxx': 'xxx','xxx': 'xxx',},{'keyword': 'sdfafdaasd8164561','xxx': 'xxx','xxx': 'xxx',},{'keyword': 'sdfafdaasd8164561','xxx': 'xxx','xxx': 'xxx',},
]
假设当前选中了五个多选el-select

回答：

你可以使用 el-select 的 @change 事件来监听选项的变化，然后将选中的选项的 tagId 提取出来并拼接成一个字符串。

如果 selectedTags 是一个字符串而不是数组，那么你需要先将其转换为数组，然后再进行处理。以下是修改后的代码：

<template><div><el-selectv-model="selectedTags"multiple@change="handleChange"placeholder="请选择"><el-optionv-for="item in options":key="item.tagId":label="item.keyword":value="item.tagId"></el-option></el-select></div>
</template><script setup>
import { ref } from 'vue';const options = ref([{ keyword: 'xxx1', referenceNum: 1, tagId: '132sf32fasdfaf1' },{ keyword: 'xxx2', referenceNum: 2, tagId: '132sf32fasdfaf2' },{ keyword: 'xxx3', referenceNum: 3, tagId: '132sf32fasdfaf3' }
]);const selectedTags = ref('');const handleChange = (value) => {selectedTags.value = value.join(',');console.log(selectedTags.value); // 输出拼接后的字符串// 你可以在这里将 selectedTags.value 发送给后端
};
</script>

在这个示例中，我们将 el-select 的 value 绑定到 item.tagId，这样 selectedTags 将是一个包含 tagId 的数组。在 handleChange 方法中，我们将数组转换为用英文逗号分隔的字符串，并将其赋值给 selectedTags。这样就可以正确地拼接用户选择的选项的 tagId