Question

我在布尔玛表中使用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>
    <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

发生样式问题是因为vuedraggable默认使用<div>作为其根元素，并且<div>（及其内容）被填充到表的第一列中。

解决方案： vuedraggable允许使用tag属性更改其根元素，因此您可以将其设置为tbody，代替现有的{{1} }在<tbody>中：

<table>

Answer 2

将tbody作为可拖动元素，而不是使用可拖动来包装tr。

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

请参阅链接以更好地理解： https://jsfiddle.net/dede89/L54yu3L9/（表格示例）（在vue可拖动的官方文档中找到）

[[更新：完整代码（基于问题）]]

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

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

2 个答案: