使用iviewUI动态添加、删除输入框及做对应的判断

使用iviewUI动态添加、删除输入框及做对应的判断，具体代码如下~

 

<Form ref="formPendingList" :model="dataInvoicing" :label-colon="true" :label-width="90">
          <Card :bordered="false" dis-hover>
              <row v-for="(item,index) in dataInvoicing">
                <i-col :xxl="8" :xl="8" :lg="8" :md="12" :sm="24" :xs="24" >
                  <FormItem label="发票号" :key="index" :prop="index +'.invoiceNumber'" :rules="{ required: true, message: '发票号不能为空', trigger: 'blur' }">
                    <i-input placeholder="发票号,如果连号用~连接"  v-model="item.invoiceNumber" />
                  </FormItem>
                </i-col>
                <i-col :xxl="8" :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
                  <FormItem label="发票金额" :key="index" :prop="index+'.invoiceCost'" :rules="{ required: true,  message: '发票金额不能为空', trigger: 'blur' }">
                    <i-input placeholder="发票金额"  v-model="item.invoiceCost" />
                  </FormItem>
                </i-col>
                <i-col :xxl="8" :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
                  <ButtonGroup v-if="index==0">
                    <Button icon="ios-add" @click="addNewInvoicing">新增</Button>
                  </ButtonGroup>
                  <ButtonGroup v-if="index>0">
                    <Button icon="ios-remove" @click="deleteNewInvoicing(index)">删除</Button>
                  </ButtonGroup>
                </i-col>
              </row>
          </Card>

          <div slot="footer" align="right">
            <Divider/>
                <Button type="text" @click="modalInvoicing = false">取消</Button>
                <Button type="primary" @click="handleInvoiceingSubmit">确定</Button>
            </div>
        </Form>

 

const formPendingList = ref(null);

//#region(确认开票弹出)开始
const modalInvoicing = ref();
const dataInvoicing = reactive([{index:1,invoiceNumber:"",invoiceCost:0}]);
const addNewInvoicing = ()=>{
    dataInvoicing.push({index:dataInvoicing.length+1,invoiceNumber:"",invoiceCost:0});
}
 
//删除行
const deleteNewInvoicing = (index)=>{
    for (let i = 0; i < dataInvoicing.length; i++) {
       if (index === i) {
        dataInvoicing.splice(i, 1);
}
    }
}

//确认开票
const handleInvoiceingSubmit = ()=>{
    formPendingList.value.validate((valid) => {
    if (valid) {
        //成功，做一些事情
    }
   else{
       //失败，做一些事情
   }
  });
}
//#region(确认开票弹出)结束