vue-draggable对表格内tr拖拽问题

发布于 2022-09-06 08:48:47 字数 1407 浏览 17 评论 0

代码如下:

      <table class="table table-condensed">
        <caption>编排工序</caption>
        <thead>
          <tr>
            <th>名称1</th>
            <th>名称2</th>
            <th>名称3</th>
            <th>名称4</th>
            <th>名称5</th>
            <th>名称6</th>
          </tr>
        </thead>
        <tbody>
          <draggable  class="list-group" v-model="arrangeP"  :options="dragOptions"  @remove="reuse">
              <tr  v-for="(item,index) in arrangeP" :key="'item'+index">
                <td>{{item.complete}}</td>
                <td>{{item.code}}</td>
                <td>{{item.name}}</td>
                <td>{{item.time}}</td>
                <td>{{item.person}}</td>
                <td>{{item.stations}}</td>
              </tr>
          </draggable> 
        </tbody>
      </table>

图片描述

我把组件draggable标签加上elemenet="tr" 然后去掉tr,出现以下情况

图片描述

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

无语# 2022-09-13 08:48:47

自己解决了,把<tbody>标签去掉,然后用draggable渲染成<tbody>就好了

汹涌人海 2022-09-13 08:48:47

请问,如果把draggable渲染成<tbody>

兮子 2022-09-13 08:48:47

请问下可以拿到拖拽的数据吗,比如说我想拖动上衣到右边的列表
然后如何拿到上衣这条数据
<tr v-for="(item,index) in arrangeP" :key="'item'+index">
这个列表的内容可以拖拽排序吗?

柠栀 2022-09-13 08:48:47

可以使用elementUI的表格组件吗

凉宸 2022-09-13 08:48:47

能把demo分享一下吗?在使用这个的时候,table无法拖拽。

https://codepen.io/yxjhasadre...

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文