vue element ui el-select多选与后端传值
在vue element ui项目中遇到了多选后与后端传值的情况。后端接收方式是数组,我这边勾选后要转换成数组传给后端,然后请求到数据后也要转换成数组展现出来。效果图如下:代码展示:<template></template>:<el-form-item label="福利待遇:" prop="welfare_tag"><el-selectmultipled
·
在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了。所以写代码还需多多分析!
更多推荐
已为社区贡献2条内容
所有评论(0)