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

weixin_44689966

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

阅读量2.3k

点赞数

文章标签： vue.js 前端 elementui

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

本文链接：https://blog.csdn.net/weixin_44689966/article/details/124362012

版权

在使用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>