j-modal的 slot="footer" 失效 v-if判断页脚按钮

 

<j-modal :visible="visible" :title="title" @cancel="close" :fullscreen="true">

..........
<span slot="footer">

      <div :key="row.KfjqFlag" v-if="row.KfjqFlag==''||row.KfjqFlag=='待办'">

      <el-button @click="visible = false">取 消</el-button>

      <el-button v-if="orderTypeDesc != '优化'" type="primary" @click="onSubmit('0')" :loading="confirmLoading0"

        >暂 存</el-button

      >

      <el-button v-if="orderTypeDesc != '优化'" type="primary" @click="onSubmit('1')" :loading="confirmLoading1"

        >确 定</el-button

      >

      <el-button v-if="orderTypeDesc == '优化'" type="primary" @click="onFlow()" :loading="confirmLoading"

        >提 交</el-button

      >

      </div>

    </span>
</j-modal>

因为vue虚拟dom机制，会尽量复用已存在相同节点元素而不会重新渲染，导致使用v-if没有达到预期效果

方法：

使用div元素将slot插槽内容包裹起来，并在div元素上使用key，插槽内容才会重新渲染 `