赞
踩
在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了。所以写代码还需多多分析!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。