码迷,mamicode.com
首页 > 其他好文 > 详细

element dialog对话框组件 不触发生命周期的坑

时间:2021-04-26 13:41:08      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:code   lse   技术   rop   led   ber   rac   sele   log   

element的dialog组件隐藏默认是不销毁的,所以不会触发生命周期

即便destroy-on-close设置为true也不好用

技术图片

 

 

 解决办法其实很简单,给他加一个v-if父级

技术图片

 

 

    <div v-if="outFormFlag">
      <el-dialog
        title="收款信息"
        :visible.sync="outFormFlag"
        width="500px"
        append-to-body
      >
        <el-form ref="outForm" :model="outFormlabel-width="100px">
          <el-form-item label="入库单编号" :required="trueprop="businessCode">
            <el-input
              v-model="outForm.businessCode"
              disabled
              placeholder="请输入入库单编号"
            />
            <span slot="error" class="el-form-item__error"
              >入库单编号不能为空</span
            >
          </el-form-item>

          <el-form-item label="合同编号" :required="trueprop="contractCode">
            <el-input
              v-model="outForm.contractCode"
              disabled
              placeholder="请输入合同编号"
            />
            <span slot="error" class="el-form-item__error"
              >合同编号不能为空</span
            >
          </el-form-item>

          <el-form-item label="仓库编号" :required="trueprop="warehouseCode">
            <el-input
              v-model="outForm.warehouseCode"
              disabled
              placeholder="请输入仓库编号"
            />
            <span slot="error" class="el-form-item__error"
              >仓库编号不能为空</span
            >
          </el-form-item>
          <el-form-item label="商品编号" :required="trueprop="skuCode">
            <el-input
              v-model="outForm.skuCode"
              disabled
              placeholder="请输入商品编号"
            />
            <span slot="error" class="el-form-item__error"
              >商品编号不能为空</span
            >
          </el-form-item>
          <el-form-item label="数量" :required="trueprop="num">
            <el-input v-model="outForm.numdisabled placeholder="请输入数量" />
            <span slot="error" class="el-form-item__error">数量不能为空</span>
          </el-form-item>
          <el-form-item label="收款账号" :required="trueprop="accountCode">
            <req-select
              placeholder="请选择收款账户"
              url="/trade/bank/list"
              arr="rows"
              label="contacts"
              val="accountCode"
              :parentData.sync="outForm.accountCode"
            />
            <span slot="error" class="el-form-item__error"
              >收款账号不能为空</span
            >
          </el-form-item>
          <el-form-item label="金额" :required="trueprop="amount">
            <el-input
              type="number"
              v-model="outForm.amount"
              placeholder="请输入收款金额"
            />
            <span slot="error" class="el-form-item__error"
              >合同编号不能为空</span
            >
          </el-form-item>
          <el-form-item label="备注" :required="falseprop="remark">
            <el-input v-model="outForm.remarkplaceholder="请输入备注" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitOut">确 定</el-button>
          <el-button @click="cancelOut">取 消</el-button>
        </div>
      </el-dialog>
    </div>

element dialog对话框组件 不触发生命周期的坑

标签:code   lse   技术   rop   led   ber   rac   sele   log   

原文地址:https://www.cnblogs.com/amtf-wah/p/14699582.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!