Vue table使用transition组件过渡动画

最新推荐文章于 2024-01-29 18:03:41 发布

Cocoriose

最新推荐文章于 2024-01-29 18:03:41 发布

阅读量6.3k

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_37765748/article/details/79702183

版权

在使用Vue的TRANSITION组件时遇到困难，通过IS绑定解决问题。了解到在DOM模板解析中，受限元素如<transition>可能导致错误渲染。解决办法是在自定义组件中使用<transition>的is特性。推荐使用JavaScript内联模板字符串或组件模板以避免DOM模板的限制。

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

        <table>
          <thead>
            <tr>
              <td>check</td>
              <td>name</td>
              <td>delete</td>
            </tr>
          </thead>
          
          <tbody is="transition-group"
            name="slide" mode="out-in">
        
          <tr v-for='task in tasks' v-bind:key='task'>
            <td><input type="checkbox" value="1" id="checkboxFourInout" name="" v-model="task.done"></td>
            <td><span :class=" {taskDone:task.done}">{
  {task.name}}</span></td>
            <td><button class="btn btn-danger " @click="deleteTask(task)">Delete</button></td>
          </tr>
          </transition>
          </tbody>
       </table>