el-dialog 关闭再打开后，窗口内容不刷新问题解决

最新推荐文章于 2025-04-28 18:53:07 发布

butterfly_onfly

最新推荐文章于 2025-04-28 18:53:07 发布

阅读量825

点赞数 5

分类专栏： vue+js 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/butterfly_onfly/article/details/144445381

版权

vue+js 专栏收录该内容

6 篇文章

订阅专栏

一个页面以组件的形式，在另一个页面el-dialog弹窗的形式弹出

，调试数据都ok，就是页面显示还是上次加载的数据，也就是当前弹出的窗体没有重新加载

问题一:回显数据不更新

解决方案一:在父组件中,给父组件中的el-dialog添加destroy-on-close属性

貌似效果不理想

解决方案二:直接在内容上加上属性v-if="dialogVisible"

<el-table-column  prop="InterventionInfos" label="干预过程记录" width="380">
                        <template slot-scope="scope">
                          <span v-for="item in scope.row.InterventionInfos" style="margin-right:10px">
                               <el-link type="primary" @click="handGYjL(scope.row)">干预记录</el-link>
                          </span>
                        </template>

                      </el-table-column>

<!--干预计划详情-->
                 <el-dialog title="干预计划详情" v-if="dialogvisible2" destroy-on-close :visible.sync="dialogvisible2"
                 style="width:100%;"
                  :lock-scroll="false" :append-to-body="true" :close="onClose1">
                      <gyxq></gyxq>
                  </el-dialog>

js 需要先引用

<script>
import gyxq1 from './addganyuxiangqing1'
export default {
    components: {
    gyxq1,
  },
  methods:{
    //关闭弹窗
    onClose1(){
      localStorage.removeItem('yjxq');
      localStorage.removeItem('stu');
      thsi.dialogvisible2=false;
    },
  	 /*显示干预记录*/
    handGYjL(val){
      var id=val.Id;
      this.$axios.get('XXXX?id='+id).then(res=>{
         if(res.statusText=="OK"){
            this.yjJL=res.data;
            this.$store.commit('SET_YJJL',this.yjJL);
           this.dialogvisible2=true;
         }
      });
    },
  }