vue element ui el-select多选与后端传值

最新推荐文章于 2025-03-19 19:43:54 发布

lfkabb

最新推荐文章于 2025-03-19 19:43:54 发布

阅读量1.2w

点赞数 8

分类专栏： vue 文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/lfkabb/article/details/118155393

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了在Vue Element UI项目中处理多选下拉框的数据，包括将用户选择的多选值转换为数组传递给后端，以及从后端接收数据后如何转换回数组进行显示。通过实例代码展示了在提交表单时如何使用join()方法将多选值组合成字符串，以及在监听数据变化时如何使用split()方法拆分字符串回数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue element ui项目中遇到了多选后与后端传值的情况。后端接收方式是数组，我这边勾选后要转换成数组传给后端，然后请求到数据后也要转换成数组展现出来。

效果图如下：

代码展示：<template></template>：

<el-form-item label="福利待遇:" prop="welfare_tag">
            <el-select
              multiple
              default-first-option
              class="ele-block"
              v-model="form.welfare_tag"
              placeholder="请选择福利待遇"
            >
              <el-option
                v-for="(item, index) in fulies"
                :key="index"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>

js: 提交时保存键事件

/* 保存编辑 */
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          //多选框数据处理
          if (this.form.welfare_tag) {
            this.form.welfare_tag = this.form.welfare_tag.join(",");
          }
          let params = Object.assign({}, this.form);
          this.$http
            .post("/?s=Manage.Create_Job.Edit", this.form)
            .then(res => {
              this.loading = false;
              if (res.data.code === 200) {
                this.$message({ type: "success", message: "成功" });
                if (!this.isUpdate) {
                  this.form = {};
                }
                this.updateVisible(false);
                this.$emit("done");
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(e => {
              this.loading = false;
              this.$message.error(e.msg);
            });
        } else {
          return false;
        }
      });
    },

重点在于：

//多选框数据处理

if (this.form.welfare_tag) {

this.form.welfare_tag = this.form.welfare_tag.join(",");

}

js 在得到后端数据后做处理。

watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data, {});
        this.isUpdate = true;
        this.form.welfare_tag = this.form.welfare_tag.split(",")
      } else {
        this.form = {};
        this.isUpdate = false;
      }
    }
  },

//主要在于：
this.form.welfare_tag = this.form.welfare_tag.split(",")

开始我在网上找了很多什么数组分割，字符串拼接什么的，并没有做好，后来在同事的帮助下写了这简单的一句就ok了。所以写代码还需多多分析！