el-tabs切换时，实时更新技巧

el-tabs的默认策略，是一次把所有tab里涉及的请求读完，

并且在之后，进行tab切换时，不再进行重新读取操作。

这当然不行，于是开始了改进之路。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

这个技巧是从网上学的，但我还是作了改进。

因为网上的例子，都只是示范两三个v-if切换，

如果我有五六个呢？七八个呢？

网上的例子就不好扩展了。

于是，我设计了一个js对象，来保持v-if变量的状态，

当切换到对应的tab时，就把其激活并重新请求后端数据。

这样，即能获取最新数据，又能减少一次读取后端数据的流量。

先上图，

此图中，还涉及共用dialog实现新增，编辑和查看的功能，再另说~~

一，el-tabls的template代码(红色切为切换的状态保持js对象)

      <el-tabs type="card" v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="发布单管理" name="deploy" value="">
              <deploy-list v-if="tabRefresh.deploy"/>
          </el-tab-pane>
          <el-tab-pane label="构建参数" name="build">
              <build-list v-if="tabRefresh.build"/>
          </el-tab-pane>
          <el-tab-pane label="K8s集群" name="k8s">
              <k8s-list v-if="tabRefresh.k8s"/>
          </el-tab-pane>
          <el-tab-pane label="Yaml模板" name="yaml">
              <yaml-list v-if="tabRefresh.yaml"/>
          </el-tab-pane>
          <el-tab-pane label="历史部署" name="history">
              <deploy-list v-if="tabRefresh.history"/>
          </el-tab-pane>
      </el-tabs>

二，vue中的data对象

      data() {
            return {
                activeName: "deploy",
                tabRefresh: {
                    deploy: true,
                    build: false,
                    k8s: false,
                    yaml: false,
                    history: false
                }
            }
        },

三，切换时触发的函数，及一个Helper函数调用

            handleTabClick: function(tab, event){
                switch (this.activeName) {
                    case 'deploy':
                        this.switchTab('deploy')
                        console.log(this.activeName);
                        break;
                    case 'build':
                        this.switchTab('build')
                        console.log(this.activeName);
                        break;
                    case 'k8s':
                        this.switchTab('k8s')
                        console.log(this.activeName);
                        break;
                    case 'yaml':
                        this.switchTab('yaml')
                        console.log(this.activeName);
                        break;
                    case 'history':
                        this.switchTab('history')
                        console.log(this.activeName);
                        break;
                    default:
                        console.log('wrong choice');

                }
            },
            switchTab: function(tab) {
                for (let [key, value] of Object.entries(this.tabRefresh)) {        
                    if (key == tab) {
                        this.tabRefresh[key] = true
                    } else {
                        this.tabRefresh[key] = false
                    }
                }
            }

el-tabs切换时，实时更新技巧

猜你喜欢