2021-07-22

element-UI-tabs标签页的使用

第一次使用tabs标签页，遇到了一些些坑，在这里记录一下。

基本使用

打算做一个文件管理功能，目前有三个界面，想要利用tabs标签页对这三个界面进行管理。
首先是创建tabs标签页

<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="文件信息" name="fileinfo" :key="'fileinfo'">
        <fileinfo></fileinfo>
      </el-tab-pane>
      <el-tab-pane label="文件名详情" name="nxsystemfileinfo" :key="'nxsystemfileinfo'">
        <nxsystemfileinfo></nxsystemfileinfo>
      </el-tab-pane>
      <el-tab-pane label="文件类型" name="typeinfo" :key="'typeinfo'">
        <typeinfo></typeinfo>
      </el-tab-pane>
    </el-tabs>

然后导入三个vue文件

import fileinfo from './fileinfo'
import nxsystemfileinfo from './nxsystemfileinfo'
import typeinfo from './typeinfo'

data () {
    return {
      activeName: 'fileinfo', // 默认第一个选项卡
    }
  },

  components: {
    fileinfo, // 文件信息界面
    nxsystemfileinfo, // 文件名界面
    typeinfo // 文件类型界面
  },

上述代码的效果如下：

这基本可以完成预期的目标，但是在开发过程中，每个tab表单的数据是动态的，在页面打开时，vue把所有页面的内容都进行了渲染，只是其他的页面隐藏了。这回导致打开页面时需要加载多个数据而卡顿，并且数据不能实时更新。

我们可以利用v-if控制显示隐藏，只允许当前页签进行渲染，对代码改进如下：

 <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="文件信息" name="fileinfo" :key="'fileinfo'">
        <fileinfo v-if="activeName=='fileinfo'"></fileinfo>
      </el-tab-pane>
      <el-tab-pane label="文件名详情" name="nxsystemfileinfo" :key="'nxsystemfileinfo'">
        <nxsystemfileinfo v-if="activeName=='nxsystemfileinfo'"></nxsystemfileinfo>
      </el-tab-pane>
      <el-tab-pane label="文件类型" name="typeinfo" :key="'typeinfo'">
        <typeinfo v-if="activeName=='typeinfo'"></typeinfo>
      </el-tab-pane>
    </el-tabs>

然后就出问题了，这里只能显示第一个页签的内容，后面两个页签的table数据并没有查询。
需要在点击tab切换时添加一个查询数据的方法

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="文件信息" name="fileinfo" :key="'fileinfo'">
        <fileinfo v-if="activeName=='fileinfo'" ref="fileinfo"></fileinfo>
      </el-tab-pane>
      <el-tab-pane label="文件名详情" name="nxsystemfileinfo" :key="'nxsystemfileinfo'">
        <nxsystemfileinfo v-if="activeName=='nxsystemfileinfo'" ref="nxsystemfileinfo"></nxsystemfileinfo>
      </el-tab-pane>
      <el-tab-pane label="文件类型" name="typeinfo" :key="'typeinfo'">
        <typeinfo v-if="activeName=='typeinfo'" ref="typeinfo"></typeinfo>
      </el-tab-pane>
    </el-tabs>

  mounted () {
    this.onQuery()
  },

methods: {
    handleClick (tab, event) {
      this.activeName = tab.name
      var that = this
      setTimeout(function () {
        that.onQuery()
      }, 500)
      console.log(tab, event)
    },
    onQuery () {
      this.$refs[this.activeName].getDataList()
    },
    // 上传文件
    }

getDataList()方法是每个界面都有的查询数据的方法。

最终效果如下：