javascript - 表格中的 vue 可拖动宽度有问题吗？

Question

我正在使用 vuedraggable在 Bulma 表中，但它会产生样式问题:

这不是 bool 玛表的问题。我在自己的表中使用了它，但出现了同样的问题。

这是我的代码:

<table class="table is-fullwidth is-bordered">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>brand</th>
            <th>Date Created</th>
            <th colspan="2">Actions</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th>Name</th>
            <th>brand</th>
            <th>Date Created</th>
            <th colspan="2">Actions</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td colspan="5" v-if="featureds.length == 0">0 Models Found</td>
        </tr>
        <draggable v-model="furds" :options="{group:'furds'}" @start="drag=true" @end="drag=false" @change="onChnage">

            <tr class="dragndrop" v-for="featured in furds">
                <td class="drag-icon"><i class="fa fa-arrows"></i></td>
                <td>{{ featured.name }}</td>
                <td>{{ featured.brand.name }}</td>
                <td>{{ featured.created_at | moment("MMMM Do, YYYY") }}</td>
                <td><a :href="`/manage/featured/${featured.id}`">View</a></td>
                <td><a :href="`/manage/featured/${featured.id}/edit`">Edit</a></td>
            </tr>
        </draggable>
    </tbody>
</table>

Answer 1

不是用 draggable 包装 tr，而是将 tbody 作为可拖动元素传递。

<draggable element="tbody" v-model="furds">

查看链接以获得更好的理解: https://jsfiddle.net/dede89/L54yu3L9/ (带表格的例子)(在vue draggable官方文档中找到)

[[更新:完整代码(基于问题)]]

<table class="table is-fullwidth is-bordered">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>brand</th>
            <th>Date Created</th>
            <th colspan="2">Actions</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th>Name</th>
            <th>brand</th>
            <th>Date Created</th>
            <th colspan="2">Actions</th>
        </tr>
    </tfoot>
    <draggable element="tbody" v-model="furds"> <!-- change here -->
        <tr>
            <td colspan="5" v-if="featureds.length == 0">0 Models Found</td>
        </tr>
            <tr class="dragndrop" v-for="featured in furds">
                <td class="drag-icon"><i class="fa fa-arrows"></i></td>
                <td>{{ featured.name }}</td>
                <td>{{ featured.brand.name }}</td>
                <td>{{ featured.created_at | moment("MMMM Do, YYYY") }}</td>
                <td><a :href="`/manage/featured/${featured.id}`">View</a></td>
                <td><a :href="`/manage/featured/${featured.id}/edit`">Edit</a></td>
            </tr>
        </draggable>
</table>
<script>
import draggable from "vuedraggable";
  export default {
      components: {
      draggable
    },
...
}
</script>