javascript - problem with vue draggable width in table? - Stack Overflow

admin管理员组

文章数量:1404346

I'm using vuedraggable inside a Bulma table, but it creates a styling problem:

It's not a problem of the Bulma table. I used this in my own table, and the same issue occurs.

Here is my code:

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

I'm using vuedraggable inside a Bulma table, but it creates a styling problem:

It's not a problem of the Bulma table. I used this in my own table, and the same issue occurs.

Here is my code:

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

• javascript
• vue.js
• vuejs2
• draggable
• bulma

Share Improve this question Follow edited Jun 18, 2020 at 6:22 tony19 139k2323 gold badges278278 silver badges347347 bronze badges asked Nov 7, 2018 at 12:33 Amir Ur RehmanAmir Ur Rehman 67011 gold badge99 silver badges2929 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Instead of wrapping tr with draggable,pass tbody as draggable element.

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

See the link for better understanding: https://jsfiddle/dede89/L54yu3L9/ (Example with table) (found in vue draggable official doc)

[[Update: full code(based on question)]]

<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 {
      ponents: {
      draggable
    },
...
}
</script>

The styling issue occurs because vuedraggable uses a <div> as its root element by default, and that <div> (along with its contents) is stuffed into the first column of the table.

Solution: vuedraggable allows changing its root element with the tag property, so you could set it to tbody, replacing the existing <tbody> in the <table>:

<table>
  <!-- FROM THIS: -->
  <!--
  <tbody> 

                本文标签：
                javascriptproblem with vue draggable width in tableStack Overflow

                        版权声明：本文标题：javascript - problem with vue draggable width in table? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，
                        转载请联系作者并注明出处：http://www.betaflare.com/web/1744797657a2625673.html，
                        本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。