el-select多选下拉框传字符串

### 如何在 Element UI 的 `el-select` 组件中实现多选并将结果以字符串形式传递 为了实现在 `el-select` 中多选并将最终的选择结果作为字符串传递给后端，可以按照以下方式进行配置和处理。 #### 1. 配置 `el-select` 支持多选 通过设置 `multiple` 属性为 true 来启用多选功能。同时，可以通过 `value-key` 属性指定选项对象的唯一键名，用于匹配选项[^1]。 ```html <template> <el-select multiple clearable filterable value-key="nodeId" v-model="selectString" @change="handleSelectChange"> <el-option v-for="item in options" :key="item.nodeId" :label="item.nodeName" :value="item"></el-option> </el-select> </template> ``` #### 2. 数据初始化 在 Vue 的数据模型中定义一个多选绑定变量，默认值应设为空数组[]，以便支持表单校验逻辑[^3]。 ```javascript <script> export default { data() { return { selectString: [], options: [ { nodeId: 'node_135061771075', nodeName: '审批人1' }, { nodeId: 'node_404274216403', nodeName: '审批人2' } ] }; }, }; </script> ``` #### 3. 转换选择结果为字符串 当用户完成选择时，监听 `@change` 事件来捕获当前选择项的变化，并将其转换为目标格式（即逗号分隔的字符串）。此操作通常发生在提交前或实时更新阶段[^4]。 ```javascript methods: { handleSelectChange(selectedItems) { this.selectString = selectedItems.map(item => item.nodeId).join(','); } } ``` 上述代码片段展示了如何利用 JavaScript 的 `map()` 方法提取每个选定项目中的特定字段（这里是 `nodeId`），再调用 `join(',')` 函数将它们组合成单一字符串。 #### 4. 提交至服务器的数据结构示例 假设我们希望向后端发送这样的 JSON 对象： ```json { "selectedNodes": "node_135061771075,node_404274216403", ... } ``` 那么可以在实际请求之前构建类似的 payload 并附带该字符串化后的参数。 --- ### 注意事项 如果遇到表单加载时立即触发验证的情况，则需确认初始状态下的绑定值不应为 null 或者空字符串；而是应该是一个空数组，这样能够有效避免不必要的即时错误提示[^2][^3]。 ---