vue v-for 使用

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>

实例