vue-iview动态新增和删除

参考链接：vue iview动态新增和删除

我根据上面的博客进行了test和小修改，效果如下：

源码如下：

• html代码

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

                <FormItem
                  label="作业过程描述："
                  style="width:80%;"
                  :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:80%;" 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>
</template>

• JS代码

<script>
export default {
  data () {
    return {
      capsuleAttr: {
        // 胶囊属性
        index: 1,
        attrList: [
          {
            AttrName: '',
            Temperature: '',
            Volume: '',
            CapsuleId: '', // 属性ID
            RcommendVolume: '', // 推荐流量
            WorkDesc: '',
            Blow: '', // 吹气时间
            Soak: '', // 浸泡时间
            WorkSort: '',
            index: 1,
            status: 1
          }
        ]
      }
    }
  },
  method: {
    // 添加属性
    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('保存失败!')
        }
      })
    }
  }

}
</script>