ElementUI中table展开行中含有el-tag动态效果消失问题

weixin_44689966

已于 2022-05-23 17:31:30 修改

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 elementui

于 2022-04-23 12:16:59 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44689966/article/details/124362012

在使用ElementUI的表格展开行功能时，若其中包含el-tag标签，当Vue版本升级到2.6.11时，el-tag的动态展开动画消失。问题源于Vue和ElementUI的版本不兼容。通过回退Vue版本到2.5.2和ElementUI版本到2.4.5，动画效果得以恢复。此问题体现了前端框架版本匹配的重要性。

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

在使用elementUI时发现当table中的展开行中含有el-tag标签，当点击展开行时，el-tag出现时的那种动态效果消失了，直接展现出来，没有动画效果
当时环境
在这里插入图片描述
经过排查之后发现时vue的版本与elementUI版本问题
将vue换成2.5.2
elementUI换成2.4.5
动画效果就又会出现
（可直接复制到html文件中运行）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.4.5/theme-chalk/index.css">
</head>
<body>
  <div id="app">
        <el-table :data="arr">
          <el-table-column label="数组" type="expand">
              <el-row v-for="(item, index) in arr" ::key="index">
                <el-col>
                    <el-tag type="primary">{{item}}</el-tag>
                </el-col>
              </el-row>
          </el-table-column>
        </el-table>
  </div>
</body>
  <!-- import Vue before Element -->
  <!-- 2.5.2有动态效果 -->
  <script src="https://cdn.staticfile.org/vue/2.5.2/vue.js"></script>

  <!-- 2.6.11没有动态效果 -->
  <!-- <script src="https://cdn.staticfile.org/vue/2.6.11/vue.js"></script> -->

  <!-- import JavaScript -->
  <script src="https://cdn.staticfile.org/element-ui/2.4.5/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
            arr:[1111111111111,211111111,311111111111,4111111111111,51111111111,6111111111111,711111111,8]
         }
      }
    })
  </script>
</html>

效果对比
在这里插入图片描述