博客

在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了。所以写代码还需多多分析！