vue el-tabs问题合集

Vue 组件常见问题合集

• 一、el-tabs和el-tab-pane
• • 1、子页面自适应宽度，导致页面样式偏离或页面渲染不完全
  • 2、tab第一页加载后无法刷新问题
  • 3、@change或@blur页面不刷新问题
  • 4、页面卡顿问题

一、el-tabs和el-tab-pane

1、子页面自适应宽度，导致页面样式偏离或页面渲染不完全

1）问题代码
父页面

<el-tabs v-model="activeName" class="tab_title_sticky">
              <el-tab-pane label="基本信息" name="first">
                <basic-info ref="basicInfo" :key="refreshKey" :readonly="readonly":personData="insData"></basic-info>
              </el-tab-pane>
 </el-tabs>

子页面

<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      ref="basicInfo"
      label-width="100px"
      class="el-form--label-right"
      :label-width="'auto'"
      :label-position="'left'"
      size="small"
      :disabled="readonly"
    >

2）现象
出现的样子 ：很明显文字和输入框换行显示，并且输入框操作后数据无法回显，其实就是页面没有渲染成功。
想要的样子

3）解决办法
第一种 ：固定子页面的宽度，将:label-width="‘auto’"改成固定百分比。页面一次性全部渲染，不过存在需要刷新的时候不刷新问题，没事下面有办法↓。

第二种 ：用v-if判断页面渲染时机，不过这种在页面切换的时候会触发页面刷新；比如：输入完tab2数据之后切换到tab1，再切换回tab2的时候，tab2之前输入的数据会没有啦。
下面是点击切换的时候触发页面渲染刷新

<el-tabs v-model="activeName" class="tab_title_sticky" @tab-click="handleClick">
          <el-tab-pane label="欠费情况" name="first">
            <com-arrears v-if="tabsArr.first" :insData="insData"></com-arrears>
          </el-tab-pane>
 </el-tabs>

	tabsArr: {
          first: true,
          second: false,
          third: false,
        },
      //tabs的切换点击方法 tab中的name是当前点击选中的那一项的name的值
      handleClick(tab) {
        for (var key in this.tabsArr) {
          if (tab.name != key) {
            this.tabsArr[key] = false;
          } else {
            this.tabsArr[key] = true;
          }
        }
      },

2、tab第一页加载后无法刷新问题

1）问题描述
当前页面加载后，“人员基本信息”页面数据变化需要下面tab1中“基本信息”跟着变化。如果一次性全部加载就不会进行数据刷新，导致无法上下页面联动。
2）解决办法
可以通过key的变化进行刷新页面

:key="refreshKey"

refreshFirstTab() {
        // 在这里实现第一个标签页的刷新逻辑
        console.log('刷新第一个标签页的内容');
        this.refreshKey += 1;
        this.activeName = 'first';
      },

3、@change或@blur页面不刷新问题

1）问题描述
使用变更事件给属性重新赋值后，发现实际值已经赋成功，不过页面没显示出来
2）解决办法
第一种

//强制刷新页面
this.$forceUpdate();

第二种

//对象指定属性值刷新
this.$set(this.form, "params", ylSumj);

4、页面卡顿问题

解决办法

//添加el-row
<div class="s_page">
        <el-row>
          <el-col :span="24">
            <el-tabs v-model="activeName" class="tab_title_sticky">

后面持续更新。。。。。