element中使用el-tab切换会出现闪屏

花落若№相随

已于 2024-01-12 16:41:38 修改

阅读量1.7k

点赞数 10

文章标签：前端 javascript html5

于 2024-01-12 16:30:33 首次发布

本文链接：https://blog.csdn.net/weixin_52544526/article/details/135556283

版权

本文探讨了在Vue中，使用v-if和v-show控制元素显示与隐藏时如何避免DOM重绘和重排导致的页面闪烁。通过比较v-if和v-show的差异，以及提供代码示例，帮助开发者理解和优化性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.原因

主要原因是操作了 DOM，导致DOM 重绘和重排。每次点击浏览器都需要重新计算元素的位置和大小，然后重新绘制页面，这个过程会导致页面内容在切换时短暂的闪烁。

这是因为切换标签导致了页面结构的改变，浏览器需要重新布局和绘制页面，从而引发闪屏问题。

2.区分v-if和v-show的区别

v-if：根据表达式的值的真假来切换元素的存在。如果表达式的值为真，则渲染该元素；如果表达式的值为假，则将该元素从 DOM 中移除。如果表达式的值多次发生变化，在每次变化时都会重新进行条件判断。因此，v-if 更适用于需要在运行时频繁切换的情况。
v-show：根据表达式的值的真假来切换元素的显示。如果表达式的值为真，则显示该元素；如果表达式的值为假，则隐藏该元素。与 v-if 不同的是，无论表达式的值如何，元素始终保留在 DOM 中。如果表达式的值多次发生变化，在每次变化时只会修改元素的样式。因此，v-show 更适用于需要频繁切换的情况。

3.代码示例

<template>
  <el-tabs :tab-position="'left'" style="height: 100%" @tab-click="tabclick">
    <el-tab-pane label="个人信息">
      <el-descriptions class="margin-top" :column="1" :size="''">
        <el-descriptions-item label="姓名">张三</el-descriptions-item>
        <el-descriptions-item label="性别">男</el-descriptions-item>
        <el-descriptions-item label="身份证号码"
          >421122*********1234</el-descriptions-item
        >
        <el-descriptions-item label="手机号">12345678901</el-descriptions-item>
        
      </el-descriptions>
    </el-tab-pane>
    <el-tab-pane label="安全设置">
      <el-table
        v-if="tabindex == 1"
        :data="tableData"
        style="width: 96%; margin: 0 auto"
      >
        <el-table-column>
          <template slot-scope="scope">
            <div class="data-title">
              <div>{{ scope.row.name }}</div>
              <div class="title">{{ scope.row.title }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="80">
          <template slot-scope="scope">
            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
            <el-button type="text" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="账号绑定">
      <el-table
        v-if="tabindex == 2"
        :data="zhbd"
        style="width: 96%; margin: 0 auto"
      >
       
        <el-table-column>
          <template slot-scope="scope">
            <div class="data-title">
              <div>{{ scope.row.name }}</div>
              <div class="title">{{ scope.row.title }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="80">
          <template slot-scope="scope">
          
            <el-button type="text" size="small">解绑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import wxsvg from "../../assets/zgh/wechat-fill.svg";
import qqsvg from "../../assets/zgh/qq-fill.svg";
import ghsvg from "../../assets/zgh/gh.svg";
export default {
  data() {
    return {
      tableData: [
        {
          title: "当前密码轻度：强",
          name: "账号密码",
        },
        {
          title: "已绑定手机：139******1329",
          name: "绑定手机",
        },
        {
          title: "未设置密保问题，密保问题可有效保护账号安全",
          name: "密保问题",
        },
        {
          title: "未绑定邮箱，绑定邮箱可有效保护账户安全",
          name: "绑定邮箱",
        },
        {
          title: "未绑定MFA设备，绑定后，可以开启多因子认证",
          name: "MFA设备",
        },
      ],
      zhbd: [
        {
          title: "未绑定微信",
          name: "微信",
          svg: 1,
        },
        {
          title: "已绑定QQ",
          name: "QQ",
          svg: 2,
        },
        {
          title: "已绑定APP",
          name: "APP",
          svg: 3,
        },
       
      ],
      tabindex: 0,
    };
  },
  methods: {
    
    tabclick(v) {
      this.tabindex = v.index;
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions-item__label {
  display: block;
  text-align: right;
  margin-right: 40px;
  width: 36%;

  //   border: 1px solid springgreen;
}
::v-deep .el-dialog {
  height: 70vh;
}
::v-deep .el-dialog__body {
  height: 86%;
  // border: 1px solid red;
}
::v-deep .el-table thead {
  display: none;
}
::v-deep .el-tabs__header {
  width: 200px;
  // text-align: left;
}
::v-deep .el-tabs__item {
  padding-left: 40px;
  // text-align: left;
}
::v-deep .el-tabs__item.is-left {
  // padding-left: 40px;
  text-align: left;
}
::v-deep .el-tabs__item.is-active {
  background: rgba(16, 141, 233, 0.0980392156862745);
}
.zhbdsvg {
  background: rgb(237 237 237);
  width: 36px;
  height: 36px;
  border-radius: 6px;
}
</style>