vue iview实现动态新增和删除

作者:周家大小姐. 时间:2024-05-08 09:34:31 

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


<Form ref="capsuleAttr" :model="capsuleAttr" :label-width="100" style="width: 80%">
 <ul>
 <li v-for="(item, index) in capsuleAttr.attrList" v-if="item.status" :key="index">
 <FormItem
  style="width:50%;"
  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" style="margin-left:1%;">
  <Button @click="handleRemove(item,index)" type="error" icon="md-close">删除</Button>
  </Col>
 </FormItem>
 <FormItem
  style="width:20%;"
  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
  style="width:20%;"
  label="流量:"
  :prop="'attrList.' + index + '.Volume'"
  :rules="{required: true, message: '流量不能为空', trigger: 'blur'}"
 >
  <Input v-model.trim="item.Volume" placeholder="流量" />
 </FormItem>
 <FormItem label="推荐流量:" style="width:20%;">
  <Input v-model.trim="item.RcommendVolume" placeholder="流量" />
 </FormItem>
 <FormItem label="吹气时间:" style="width:20%;">
  <Input v-model.trim="item.Blow" placeholder="吹气时间" />
 </FormItem>
 <FormItem label="浸泡时间:" style="width:20%;">
  <Input v-model.trim="item.Soak" placeholder="浸泡时间" />
 </FormItem>

<FormItem
  label="作业过程描述:"
  style="width:40%;"
  :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 style="width:20%;" 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('capsuleAttr')">保存</Button>
 <Button @click="$router.go( -1)" style="margin-left: 8px">返回</Button>
 </FormItem>
</Form>

data:


capsuleAttr: {
//胶囊属性
index: 1,
attrList: [
 {
 AttrName: "",
 Temperature: "",
 Volume: "",
 CapsuleId: "", //属性ID
 RcommendVolume: "", //推荐流量
 WorkDesc: "",
 Blow: "", //吹气时间
 Soak: "", //浸泡时间
 WorkSort: "",
 index: 1,
 status: 1
 }
]
},

methods:


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

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

更多vue学习教程请阅读专题《vue实战教程》

来源:https://blog.csdn.net/qq_40190624/article/details/101282491

标签:vue,iview,新增删除
0
投稿

猜你喜欢

  • JSP安全开发之XSS漏洞详解

    2023-06-13 13:07:24
  • ORACLE应用经验(1)

    2010-07-31 12:53:00
  • pandas实战:分析三国志人物示例实现

    2023-07-12 21:11:46
  • Pandas 按索引合并数据集的方法

    2023-06-01 13:35:10
  • Python装饰器限制函数运行时间超时则退出执行

    2022-09-07 18:12:54
  • MySQL中CURRENT_TIMESTAMP的使用方式

    2024-01-12 20:10:29
  • Python xml、字典、json、类四种数据类型如何实现互相转换

    2023-10-17 17:36:20
  • Python程序员面试题 你必须提前准备!

    2023-09-12 09:52:44
  • Python 文件重命名工具代码

    2022-09-25 05:15:32
  • python实现多人聊天室

    2022-09-02 18:56:21
  • pandas重复行删除操作df.drop_duplicates和df.duplicated的区别

    2021-02-13 05:56:36
  • 与ClientWidth有关的一点资料

    2024-04-22 22:25:08
  • nodejs+mysql实现用户相关的增删改查的详细操作

    2024-01-26 10:34:45
  • 整理Python 常用string函数(收藏)

    2021-08-25 19:21:52
  • 用asp实现的代码批量修改程序

    2007-09-24 13:31:00
  • 基于Python实现经典植物大战僵尸游戏

    2021-01-28 11:17:20
  • 浅谈MySQL中的子查询优化技巧

    2024-01-19 12:01:45
  • Tensorflow中的dropout的使用方法

    2021-04-22 01:21:58
  • Python实现的特征提取操作示例

    2023-02-07 06:08:04
  • 详解Python变量与注释高级用法

    2022-08-06 08:17:08
  • asp之家 网络编程 m.aspxhome.com