当前位置：首页 > news >正文

js：根据后端返回的数组取出每一个数组的keyword字段然后拼接成一个逗号分隔的字符串

news 来源：原创 2025/5/24 4:14:18

问：

现在有一个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-select
      v-model="selectedTags"
      multiple
      @change="handleChange"
      placeholder="请选择"
    >
      <el-option
        v-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