当前位置:   article > 正文

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

elementui复选框后端传值

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

效果图如下:

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

  1. <el-form-item label="福利待遇:" prop="welfare_tag">
  2. <el-select
  3. multiple
  4. default-first-option
  5. class="ele-block"
  6. v-model="form.welfare_tag"
  7. placeholder="请选择福利待遇"
  8. >
  9. <el-option
  10. v-for="(item, index) in fulies"
  11. :key="index"
  12. :label="item.name"
  13. :value="item.name"
  14. >
  15. </el-option>
  16. </el-select>
  17. </el-form-item>

js: 提交时保存键事件

  1. /* 保存编辑 */
  2. save() {
  3. this.$refs["form"].validate(valid => {
  4. if (valid) {
  5. this.loading = true;
  6. //多选框数据处理
  7. if (this.form.welfare_tag) {
  8. this.form.welfare_tag = this.form.welfare_tag.join(",");
  9. }
  10. let params = Object.assign({}, this.form);
  11. this.$http
  12. .post("/?s=Manage.Create_Job.Edit", this.form)
  13. .then(res => {
  14. this.loading = false;
  15. if (res.data.code === 200) {
  16. this.$message({ type: "success", message: "成功" });
  17. if (!this.isUpdate) {
  18. this.form = {};
  19. }
  20. this.updateVisible(false);
  21. this.$emit("done");
  22. } else {
  23. this.$message.error(res.data.msg);
  24. }
  25. })
  26. .catch(e => {
  27. this.loading = false;
  28. this.$message.error(e.msg);
  29. });
  30. } else {
  31. return false;
  32. }
  33. });
  34. },

重点在于:  

//多选框数据处理

          if (this.form.welfare_tag) {

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

          }

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

  1. watch: {
  2. data() {
  3. if (this.data) {
  4. this.form = Object.assign({}, this.data, {});
  5. this.isUpdate = true;
  6. this.form.welfare_tag = this.form.welfare_tag.split(",")
  7. } else {
  8. this.form = {};
  9. this.isUpdate = false;
  10. }
  11. }
  12. },
  13. //主要在于:
  14. this.form.welfare_tag = this.form.welfare_tag.split(",")

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/107292
推荐阅读
相关标签