建站资讯

化妆品商家开发小程序_vue iview完成动态新增和删

作者:admin 发布时间:2021-01-05
vue iview实现动态新增和删除     .   这篇文章主要为大家详细介绍了vue iview实现动态新增和删除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue iview动态新增和删除的具体代码,供大家参考,具体内容如下

 Form ref="ca凡科抠图uleAttr" :model="ca凡科抠图uleAttr" :label-width="100" 
 li v-for="(item, index) in ca凡科抠图uleAttr.attrList" v-if="item.status" :key="index" 
 FormItem
 label="属性名称:"
 :prop="'attrList.' + index + '.AttrName'"
 :rules="{required: true, message: '属性名称不能为空', trigger: 'blur'}"
 Col span="7" 
 Input v-model.trim="item.AttrName" placeholder="属性名称" / 
 /Col 
 Col span="2" 
 Button @click="handleRemove(item,index)" type="error" icon="md-close" 删除 /Button 
 /Col 
 /FormItem 
 FormItem
 label="温度:"
 :prop="'attrList.' + index + '.Temperature'"
 :rules="{required: true, message: '温度不能为空', trigger: 'blur',type:'string', transform(val) {
 return String(val)}}"
 Input v-model.trim="item.Temperature" placeholder="温度" / 
 /FormItem 
 FormItem
 label="流量:"
 :prop="'attrList.' + index + '.Volume'"
 :rules="{required: true, message: '流量不能为空', trigger: 'blur'}"
 Input v-model.trim="item.Volume" placeholder="流量" / 
 /FormItem 
 FormItem label="推荐流量:" 
 Input v-model.trim="item.RcommendVolume" placeholder="流量" / 
 /FormItem 
 FormItem label="吹气时间:" 
 Input v-model.trim="item.Blow" placeholder="吹气时间" / 
 /FormItem 
 FormItem label="浸泡时间:" 
 Input v-model.trim="item.Soak" placeholder="浸泡时间" / 
 /FormItem 
 FormItem
 label="作业过程描述:"
 :prop="'attrList.' + index + '.WorkDesc'"
 :rules="{required: true, message: '作业过程描述不能为空', trigger: 'blur'}"
 Input
 v-model="item.WorkDesc"
 type="textarea"
 :autosize="{minRows: 5,maxRows: 10}"
 placeholder="输入作业过程描述..."
 /FormItem 
 FormItem label="作业顺序:" 
 !-- :rules="ruleWorkSort" -- 
 Input v-model.trim="item.WorkSort" placeholder="作业顺序" / 
 /FormItem 
 Divider dashed / 
 /li 
 /ul 
 FormItem 
 Row 
 Col span="8" 
 Button type="dashed" long @click="handleAttrAdd" icon="md-add" 增加属性 /Button 
 /Col 
 /Row 
 /FormItem 
 FormItem 
 Button type="primary" @click="handleAttrSubmit('ca凡科抠图uleAttr')" 保存 /Button 
 Button @click="$router.go( -1)" 返回 /Button 
 /FormItem 
 /Form 

data:

 ca凡科抠图uleAttr: {
 //胶囊属性
 index: 1,
 attrList: [
 AttrName: "",
 Temperature: "",
 Volume: "",
 Ca凡科抠图uleId: "", //属性ID
 RcommendVolume: "", //推荐流量
 WorkDesc: "",
 Blow: "", //吹气时间
 Soak: "", //浸泡时间
 WorkSort: "",
 index: 1,
 status: 1
 },

methods:

// 添加属性
 handleAttrAdd() {
 this.ca凡科抠图uleAttr.index++;
 this.ca凡科抠图uleAttr.attrList.push({
 AttrName: "",
 Temperature: "",
 Volume: "",
 WorkDesc: "",
 WorkSort: "",
 RcommendVolume: "", //推荐流量
 Blow: "", //吹气时间
 Soak: "", //浸泡时间
 index: this.ca凡科抠图uleAttr.index,
 status: 1
 handleRemove(item, index) {
 console.log(item.Id);
 if (item.Id) {
 this.$Modal.confirm({
 title: "删除本条记录",
 onOk: () = {
 ProductModule.getCa凡科抠图uleAttributeDel(item.Id).then(res = {
 if (res.ess) {
 this.ca凡科抠图uleAttr.attrList[index].status = 0;
 this.$ess("删除成功");
 onCancel: () = {
 console.log("onCancel");
 return;
 this.ca凡科抠图uleAttr.attrList[index].status = 0;
 // 胶囊属性保存新增
 handleAttrSubmit(name) {
 this.$refs[name].validate(valid = {
 if (valid) {
 if (this.userId) {
 this.getCa凡科抠图uleAttrEditAdd();
 } else {
 if (this.ca凡科抠图uleId) {
 this.getSaveAttrCreate();
 } else {
 this.$Message.error("请先保存胶囊数据");
 } else {
 this.$Message.error("保存失败!");
 },

关于vue.js组件的教程,请大家点击专题进行学习。

更多vue学习教程请阅读专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。



收缩