elementUI弹框中根据input框值是0还是大于0判断是否新增一项(动态添加input框)

2022-08-03 12:07:33

前言:

近期参与的项目中,需要在新增的弹框中做一个判断(编辑不动):通过判断用户输入的数量的值来动态的添加内容的input框。即:

实现过程:

(1)

首先还是在showtable.vue页面写好新增编辑弹框和风险内容弹框

<!-- 新增编辑 -->
<el-dialog :title="title" :visible.sync="dialogFormVisible">
    <add-edit-form ref="addEditProcess" :rowData="rowData" @sendForm="sendForm" :isEdit="isEdit" :title="title"></add-edit-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAddEditForm">确 定</el-button>
    </div>
</el-dialog>
<!-- 风险内容 -->
<el-dialog title="风险内容" :visible.sync="dialogFormRisk">
    <el-form ref="riskForm">
        <el-form-item :label="'风险内容'+(i+1)" label-width="120px" v-for="(item,i) of riskItems" :key="i">
            <el-input  v-model="riskItems[i]"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormRisk = false">取 消</el-button>
        <el-button type="primary" @click="determineRisk">确 定</el-button>
    </div>
</el-dialog>

(2)

确定新增按钮,调的还是新增组件的transform方法,再回来就是sendForm方法,此时,需要判断status和数量了:

// 新增编辑--子父组件传值
sendForm(formData) {
    this.formData = formData
    let submitObj = {
        "url": '',
        "msg": '',
    }
    if (formData.status === "1") {
        if(formData.addForm.riskquantity == "0"){
            // 直接新增
            submitObj.url = add.url
            submitObj.msg = "确定新增?"
            submitObj.contentType = 'json'
            //调共同方法(接口)
            this.getInterface(submitObj,formData)
        }else{
            //打开风险内容弹框
            this.dialogFormRisk = true
            let riskData = formData.addForm.riskquantity
            this.riskItems = []
            for(let i=1;i<=riskData;i++){
                this.riskItems.push('')
            }
        }
    } else {
        submitObj.url = modify.url
        submitObj.msg = "确定修改?"
        submitObj.contentType = 'json'
        this.getInterface(submitObj,formData)
    }
},
// 共同方法
getInterface(submitObj,formData){
    let _this = this
    this.$confirm(submitObj.msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        this.$post(submitObj.url, formData.addForm,submitObj.contentType).then(res => {
            this.$message({
                message: res.msg,
                type: 'success',
                duration: 1500,
                onClose: function () {
                    _this.dialogFormVisible = false
                    _this.dialogFormRisk = false
                    let form = {
                        "page": _this.page,
                        "limit": _this.limit
                    }
                    _this.getTableData(form)
                }
            });
        }).catch(err => {
            _this.dialogFormVisible = false
        })
    }).catch(err => {
        console.log(err)
    })
},

(3)

最后就是风险内容填完调新增接口了:

// 确定风险内容
determineRisk(){
    this.formData.addForm.risk_content = this.riskItems
    let submitObj = {
        "url": mini_upgrade_change_details_add.url,
        "msg": '确定新增?',
        "contentType":'json'
    }
    this.getInterface(submitObj,this.formData)
},
  • 作者:喂猫吃草
  • 原文链接:https://blog.csdn.net/Annexiaobin/article/details/103820744
    更新时间:2022-08-03 12:07:33