首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
vue.js
V2EX  ›  Vue.js

求助:关于 element-ui 中的 v-loading

  •  
  •   sevenzhou1218 · 57 天前 · 1311 次点击
    这是一个创建于 57 天前的主题,其中的信息可能已经有所发展或是发生改变。

    一个很简单的功能,搜索列表内容时,发送请求获取数据,加了一个 loading 效果,展示数据的时候增加了一个 filter,但是发现,只要加了 loading,filter 就执行了两次。

    我的理解为,loading 效果改变了虚拟的 dom 树,导致内容重绘,从而 filter 又执行了一次? 这样会不会增加额外消耗?

    <template>
      <div>
        <div class="search-div">
    	    <el-button type="primary" @click="doSearch" :loading="searchLoading">查询</el-button>
        </div>
        <div style="height: 100px;" class="content" v-loading="searchLoading" element-loading-background="rgba(255, 255, 255, 0.7)">
          {{test | formatVal}}
        </div>
        
      </div>
    </template>
    <script>
    export default {
      filters:{
        formatVal(val){
          console.info(`test = ${val}`, new Date().getTime());
          return val;
        },
      },
      data(){
        return {
          searchLoading: false, 
          test: 1
        };
      },
      methods: {
        //搜索
        doSearch(){
          let self = this;
          self.searchLoading = true;
          setTimeout(()=>{
    	      self.test = Math.random();
    	      self.searchLoading = false;
          }, 1000);
        },
      },
      // watch:{
      //   test: function(v){
    	//     console.info('test changed', v);
      //   }
      // }
    }
    </script>
    
    目前尚无回复
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   957 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 21ms · UTC 19:31 · PVG 03:31 · LAX 11:31 · JFK 14:31
    ♥ Do have faith in what you're doing.