表单内动态删减标签
作者：互联网
父组件
<template>
<div class="ele-body">
<el-card shadow="never">
<el-button type="primary" @click="openEdit(null)">添加大类</el-button>
<el-table
:data="list"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px"
>
<el-table-column
prop="name"
label="大类"
align="center"
header-align="center"
/>
<el-table-column label="大类图标" align="center" header-align="center">
<template slot-scope="scope">
<img :src="scope.row.img" alt="" />
</template>
</el-table-column>
<el-table-column label="预估重量" align="center" header-align="center">
<template slot-scope="scope">
<div v-for="item in hanshu(scope.row.value)" :key="item.id">
{{ item }}
</div>
</template>
</el-table-column>
<el-table-column label="小类" align="center" header-align="center">
<template slot-scope="scope">
<div v-for="item in scope.row.sub" :key="item.id">
{{ item.name }}
</div>
</template>
</el-table-column>
<el-table-column label="小类备注" align="center" header-align="center">
<template slot-scope="scope">
<div v-for="item in scope.row.sub" :key="item.id">
{{ item.remark }}
</div>
</template>
</el-table-column>
<el-table-column label="单位" align="center" header-align="center">
<template slot-scope="scope">
<div v-for="item in scope.row.sub" :key="item.id">
{{ item.unit }}
</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center" header-align="center">
<template slot-scope="scope">
<el-link type="primary" @click="openEdit(scope.row)"
>修改大类</el-link
>
<el-link type="primary" @click="scbig(scope.row)">删除大类</el-link>
<el-link type="primary" @click="xiaoclass(scope.row)"
>编辑小类</el-link
>
</template>
</el-table-column>
</el-table>
<!-- 编辑小类弹框 -->
<el-dialog title="编辑小类" :visible.sync="bjx" width="30%">
<el-form v-model="small">
<el-form-item style="margin:10px">
<div class="biao" v-for="item in small" :key="item.id">
<el-input
style="width: 20%;"
placeholder="小类名称"
v-model="item.name"
clearable
/>
<el-input
style="width: 40%;margin-left:10px"
placeholder="请输入小类备注"
v-model="item.remark"
clearable
/>
<el-input
style="width: 20%;margin-left:10px"
placeholder="输入单位"
v-model="item.unit"
clearable
/>
<el-button
type="primary"
v-if="item.id"
style="width: 80px;margin-left:10px;"
@click="sc(item.id)"
>删除</el-button
>
</div>
</el-form-item>
<el-form-item>
<el-button
style="width: 62%;"
plain
type="primary"
@click="xz"
:disabled="this.jy"
>添加小类</el-button
>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="bjx = false">取消添加</el-button>
<el-button type="primary" @click="qeren">确认添加</el-button>
</span>
</el-dialog>
</el-card>
<RoleEdit :data="current" @querylist="querylist" :visible.sync="showEdit" />
</div>
</template>
<script>
import RoleEdit from "./edit";
export default {
components: { RoleEdit },
data() {
return {
list: [],
small: [],
av: "",
bjx: false,
jy: false,
// 是否显示编辑弹窗
showEdit: false,
// 当前编辑数据
current: null
};
},
created() {
this.querylist();
},
methods: {
/* 显示编辑 */
openEdit(row) {
console.log(row);
this.current = row;
this.showEdit = true;
},
// 分割
hanshu(value) {
if (value) {
let zhi = value.split(",");
return zhi;
}
},
// 获取全部
querylist() {
this.$http.post("?s=Manage.Setting_RecycleCategory.Get", {}).then(res => {
console.log(res, "回收");
if (res.data.code == 200) {
this.list = res.data.data;
}
});
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex.length) {
return {
rowspan: rowIndex.length,
colspan: 1
};
} else {
return {
rowspan: 1,
colspan: 1
};
}
}
},
// 编辑小类
qeren() {
this.$http
.post("?s=Manage.Setting_RecycleCategory.AddSubCategory", {
pid: this.av,
name: this.small[this.small.length - 1].name,
remark: this.small[this.small.length - 1].remark,
unit: this.small[this.small.length - 1].unit
})
.then(res => {
console.log(res, "增加");
if (res.data.code == 200) {
this.$message({ type: "success", message: "成功" });
this.bjx = false;
this.jy = false;
this.querylist();
} else {
this.$message.error(res.data.msg);
}
});
},
xiaoclass(e) {
this.small = [];
console.log(e);
this.av = e.id;
this.bjx = true;
if (e.sub) {
this.small = e.sub;
} else {
e["sub"] = [];
}
console.log(this.small, "day");
},
//编辑小类删除
sc(e) {
this.$http
.post("?s=Manage.Setting_RecycleCategory.Del", { id: e })
.then(res => {
if (res.data.code == 200) {
this.$message({ type: "success", message: "成功" });
this.bjx = false;
this.querylist();
} else {
this.$message.error(res.data.msg);
}
});
},
//大类删除
scbig(e) {
// this.$http
// .post("?s=Manage.Setting_RecycleCategory.Del", { id: e.id })
// .then(res => {
// if (res.data.code == 200) {
// this.$message({ type: "success", message: "成功" });
// this.querylist();
// } else {
// this.$message.error(res.data.msg);
// }
// });
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.$http
.post("?s=Manage.Setting_RecycleCategory.Del", { id: e.id })
.then(res => {
if (res.data.code == 200) {
this.$message({ type: "success", message: "成功" });
this.querylist();
} else {
this.$message.error(res.data.msg);
}
});
});
},
// 新增
xz() {
if (this.small.length > 0) {
this.small.push({});
this.jy = true;
} else {
this.small.push({});
this.jy = true;
}
}
}
};
</script>
<style scoped>
.asdaswww {
display: flex;
flex-direction: row;
}
.tu {
margin-left: 30px;
width: 150px;
height: 150px;
}
.biao {
display: flex;
margin-bottom: 10px;
}
</style>
子组件
<!-- 角色编辑弹窗 -->
<template>
<el-dialog
:title="isUpdate ? '修改大类' : '添加大类'"
:visible="visible"
width="400px"
:destroy-on-close="true"
:lock-scroll="false"
@update:visible="updateVisible"
>
<el-form ref="form" :model="form" :rules="rules" label-width="82px">
<el-form-item label="大类名称:">
<el-input v-model="form.name" placeholder="请输入大类名称" clearable />
</el-form-item>
<el-form-item label="大类图标:">
<el-upload
class="tu"
ref="$qiniu_img"
:action="'http://upload-z2.qiniup.com'"
name="file"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:limit="1"
list-type="picture-card"
:data="info"
v-model="form.img"
:on-exceed="onExceed"
accept="image/*"
>
<i class="el-icon-plus"></i>
</el-upload>
<img width="100%" v-if="isUpdate" :src="data.img" alt="" />
</el-form-item>
<!-- ---------------------------------------------------- -->
<el-tag
v-for="(item, index) in infoaaaa"
:key="index"
closable
:disable-transitions="false"
@close="handleClose(item)"
>
{{ item }}
</el-tag>
<!-- -->
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="form.value"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput"
>+ New Tag</el-button
>
</el-form>
<div slot="footer">
<el-button @click="updateVisible(false)">取消</el-button>
<el-button type="primary" @click="save" :loading="loading"
>保存
</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: "RoleEdit",
props: {
// 弹窗是否打开
visible: Boolean,
// 修改回显的数据
data: Object
},
data() {
return {
// 表单数据
form: Object.assign({}, this.data),
// 表单验证规则
rules: {
name: [{ required: true, message: "请输入广告标题", trigger: "blur" }]
},
// 提交状态
loading: false,
// 是否是修改
isUpdate: false,
info: {
key: "",
token: "",
host: ""
},
infoaaaa: [],
inputVisible: false
};
},
watch: {
data() {
if (this.data) {
this.infoaaaa = [];
this.form = Object.assign({}, this.data);
if (this.form.value) {
this.infoaaaa = this.form.value.split(",");
this.form.value = "";
}
this.isUpdate = true;
} else {
this.form = {};
this.infoaaaa = [];
this.isUpdate = false;
}
}
},
mounted() {
this.form = Object.assign({}, this.data, {
value: ""
});
},
methods: {
hanshu(value) {
if (value) {
let zhi = value.split(",");
return zhi;
}
},
// 七流云上传前
fileName(name) {
var date = new Date();
return (
date.getFullYear() +
"/" +
(date.getMonth() + 1) +
"/" +
date.getDate() +
"/" +
this.$util.uuid(16) +
name.substring(name.lastIndexOf("."))
);
},
onExceed() {},
beforeUpload(file) {
let that = this;
that.info.key = that.fileName(file.name);
return new Promise((resolve, reject) => {
that.$http.get("/?s=Manage.Upload.QiniuToken").then(res => {
console.log(res);
if (res.data.code == 200) {
that.info.token = res.data.data.token; // token凭证
that.info.host = res.data.data.host; // 上传域名
return resolve(res.data.data);
} else {
that.$message.error(res.data.data.msg);
return reject(false);
}
});
});
},
// 七流云上传后的钩子
handleSuccess(res, file) {
this.form.img = this.info.host + res.key;
},
/* 保存编辑 */
save() {
// this.form.slide_type = this.slide_type;
this.form.value = this.infoaaaa.join(",");
this.$refs["form"].validate(valid => {
if (valid) {
this.loading = true;
this.$http
.post("?s=Manage.Setting_RecycleCategory.EditCategory", 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("querylist");
} else {
this.$message.error(res.data.msg);
}
})
.catch(e => {
this.loading = false;
this.$message.error(e.message);
});
} else {
return false;
}
});
},
/* 更新visible */
updateVisible(value) {
this.$emit("update:visible", value);
this.$emit("querylist");
console.log(this.$emit("update:visible", value));
},
// 删除
handleClose(e) {
console.log(e, "zhes");
this.infoaaaa.splice(this.infoaaaa.indexOf(e), 1);
},
// 点击添加
showInput() {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
// 失去焦点。点击
handleInputConfirm() {
let value = this.form.value;
if (value) {
this.infoaaaa.push(value);
}
this.inputVisible = false;
this.form.value = "";
}
}
};
</script>
<style scoped>
.el-tag + .el-tag {
margin: 5px 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>
标签：false,form,标签,删减,value,表单,res,message,data 来源： https://blog.csdn.net/qq_54896898/article/details/121014418