html

<div>
<el-button @click="addListItem" type="primary" style="position: absolute;">+</el-button>
<div v-for="(item, index) in formData.liuchengs" :key="index" :id="index">
<el-form-item label="流程:" :prop="'liuchengs.' + index + '.no'" :rules="{required: true, message: '', trigger: 'blur'}">
<el-input v-model="item.no" :clearable="true" style="width: 250px;" placeholder="请输入" />
</el-form-item>
<el-form-item label="件数:" :prop="'liuchengs.' + index + '.num'" :rules="{required: true, message: '', trigger: 'blur'}">
<el-input v-model="item.num" :clearable="true" style="width: 250px;" placeholder="请输入" />
</el-form-item>
<el-form-item label="问题" :prop="'liuchengs.' + index + '.qus'">
<el-input v-model="item.qus" :clearable="true" style="width: 150px;" placeholder="请输入" />
</el-form-item>
<el-button @click="delListItem(index)" type="danger">删 除</el-button>
</div>
</div>

js

<script>export default {
  name: 'CombinationCard',

    data() {
      return {
          formData: {
              liuchengs: [{
                  no: '',
                  num: '',
                  qus: '',
              }],
          }
        
      };
    },
    created(){
        this.addListItem()    //打开页面执行点击事件
    },
    methods: {
     addListItem() {
        this.formData.liuchengs.push({
            no: '',
            num: '',
            qus: '',
        });
      },
      delListItem(index) {
        if(this.formData.liuchengs.length > 1){
            this.formData.liuchengs.splice(index,1);
          }else{
            this.$alert('最后一个无法删除!', '提示信息', {
              confirmButtonText: '确定'
            });
          }
      },
    },

}
const formData = ref({
            name: '',
            spec: '',
            batchNo: '',
            classid: '',
            largePlateNum: '',
            packerNo: '',
            date: new Date(),
            recycler: '',
            liuchengs: [],

        })
</script>

实例

最新文章

  1. 【技巧】为ComboBox添加自动提示
  2. windows10降低IE版本
  3. java集合-LinkedList
  4. 关于VSS上的项目源码管理的注意问题
  5. 必填项(required)
  6. Java为什么能跨平台运行
  7. 使用Qemu调试内核
  8. Ibatis.net防Sql注入
  9. c++崩溃错误2
  10. Jquery 遍历数组之grep()方法介绍
  11. jvm学习006 jvm内存结构分配
  12. Java的单例模式
  13. Eslint报错整理与解决方法(持续整理)
  14. GsonUtil工具类
  15. tomcat apr
  16. Centos7.3+uwsgi+Nginx部署Django程序
  17. Oracle(字符函数)
  18. java,sort函数的深刻理解
  19. Executor框架(一)
  20. Zookeeper命名服务&mdash;&mdash;生成分布式有序且唯一id

热门文章

  1. 慢sql_查询条件加了函数导致索引失效
  2. iOS 绘制虚线
  3. linux部署nacos集群
  4. 2022-6,flask+vue+uwsgi+nginx,线上部署完整流程打包配置文件
  5. Delphi 移除窗口最大化按钮
  6. pandoc转换markdown生成pdf文件表格问题
  7. win10 U盘重装系统
  8. day11 事件相关笔记
  9. Day21:尝试脱离相同ip连接
  10. [转]有限状态机FSM(finite state machine) 一