首页 > 其他分享 >vue v-for 使用

vue v-for 使用

时间:2022-11-10 13:55:31浏览次数:35  
标签:index qus vue no formData num 使用 liuchengs

html

<div v-for="(item, index) in formData.liuchengs" :key="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>
            <!-- <el-button @click="addListItem" type="primary">添 加</el-button> -->
        </div>
        <el-button @click="addListItem" type="primary">添 加</el-button>

js

<script>
export default {
    data() {
      return {
          formData: {
              liuchengs: [{
                  no: '',
                  num: '',
                  qus: '',
              }],
          }
        
      };
    },
    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: '确定'
            });
          }
      },
    },
}

</script>

实例

 

标签:index,qus,vue,no,formData,num,使用,liuchengs
From: https://www.cnblogs.com/cmooc/p/16876805.html

相关文章