首页 > 其他分享 >j-modal的 slot="footer" 失效 v-if判断页脚按钮

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

时间:2024-09-19 15:36:27浏览次数:8  
标签:slot footer 插槽 页脚 modal div

  <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,插槽内容才会重新渲染 `

标签:slot,footer,插槽,页脚,modal,div
From: https://www.cnblogs.com/snowhite/p/18420675

相关文章

  • 大数据-128 - Flink 并行度设置 细节详解 全局、作业、算子、Slot
    点一下关注吧!!!非常感谢!!持续更新!!!目前已经更新到了:Hadoop(已更完)HDFS(已更完)MapReduce(已更完)Hive(已更完)Flume(已更完)Sqoop(已更完)Zookeeper(已更完)HBase(已更完)Redis(已更完)Kafka(已更完)Spark(已更完)Flink(正在更新!)章节内容上节我们完成了如下的内容:ManageOperatorStateStateBackendCheckpoint......
  • 大数据-123 - Flink 并行度 相关概念 全局、作业、算子、Slot并行度 Flink并行度设置
    点一下关注吧!!!非常感谢!!持续更新!!!目前已经更新到了:Hadoop(已更完)HDFS(已更完)MapReduce(已更完)Hive(已更完)Flume(已更完)Sqoop(已更完)Zookeeper(已更完)HBase(已更完)Redis(已更完)Kafka(已更完)Spark(已更完)Flink(正在更新!)章节内容上节我们完成了如下的内容:FlinkTimeWatermarkJava代码实例测试简单介......
  • 开源模型应用落地-qwen2-7b-instruct-LoRA微调-unsloth(让微调起飞)-单机单卡-V100(十七)
    一、前言  本篇文章将在v100单卡服务器上,使用unsloth去高效微调QWen2系列模型,通过阅读本文,您将能够更好地掌握这些关键技术,理解其中的关键技术要点,并应用于自己的项目中。  使用unsloth能够使模型的微调速度提高2-5倍。在处理大规模数据或对时间要求较高的场景下......
  • tsx 实现slot插槽
    tsx实现slot插槽父组件<template><divclass="component-name"><child><template#default="scope"><div>default</div><div>{{scope.a}}</......
  • vue3 内置特殊元素<slot> 与 插槽 Slots
    vue官网内置特殊元素<slot>插槽Slots<slot><slot>元素是一个插槽出口(slotoutlet),标示了父元素提供的插槽内容(slotcontent)将在哪里被渲染。Vue模板里的<slot>元素会被编译到JavaScript,因此不要与原生<slot>元素进行混淆。<slot>元素可以使用nameat......
  • Signals & slots
    #!/usr/bin/python3#-*-coding:utf-8-*-"""ZetCodePyQt5tutorialInthisexample,weconnectasignalofaQSlidertoaslotofaQLCDNumber.Author:JanBodnarWebsite:zetcode.comLastedited:January2017"""i......
  • Oracle数据库配置大页脚本
    编辑脚本su-oracle$vihugepages_settings.sh------------------------------------------#!/bin/bash##hugepages_settings.sh##Linuxbashscripttocomputevaluesforthe#recommendedHugePages/HugeTLBconfiguration#onOracleLinux##Note:Thisscri......
  • slot插槽灵活应变显示表单的顺序,多少
    <el-formref="moreForm":model="formInline"inline>      <el-rowtype="flex"class="flex-row":gutter="0">       <slotvue:head-list="headList[32]">       ......
  • 前端宝典二十五:vue2高阶用法mixin、transition、slot
    本文主要探讨vue2中几个高阶的用法:mixin、transition、slot一、mixin在Vue中,mixin(混入)是一种用于在多个组件之间共享代码的机制。它允许你定义可重用的选项对象,并将其混入到不同的组件中。1、使用方法创建一个混入对象:constmyMixin={data(){return{......
  • Python爬虫:网页脚注与引用的智能捕手
    标题:Python爬虫:网页脚注与引用的智能捕手在数字化信息的海洋中,网页脚注和引用是丰富内容、提供来源的重要方式。然而,对于Python爬虫而言,如何精准捕捉这些细微信息,成为了一项挑战。本文将深入探讨Python爬虫在处理网页中的脚注和引用时的策略与技巧,通过实例代码展示其高效性......