Vue table使用transition组件过渡动画

最新推荐文章于 2024-08-15 23:24:24 发布

Cocoriose

最新推荐文章于 2024-08-15 23:24:24 发布

阅读量6.3k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_37765748/article/details/79702183

版权

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

摘要由CSDN通过智能技术生成

        <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>