表格中vue可拖动宽度的问题？答案

【问题标题】：problem with vue draggable width in table?表格中vue可拖动宽度的问题？
【发布时间】：2018-11-07 12:33:46
【问题描述】：

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

这不是布尔玛表的问题。我在自己的表中使用了这个，并且出现了同样的问题。

这是我的代码：

<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

【解决方案1】：

不要将 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>

【讨论】：

尝试解释代码或在此处发布代码，因为如果链接失效，它对任何人都没有帮助
现在可以了吗？ @艾萨克

【解决方案2】：

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

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

<table>
  <!-- FROM THIS: -->
  <!--
  <tbody> ?
    <draggable> ?
      <tr v-for="featured in furds">
        ...
      </tr>
    </draggable>
  </tbody>
  -->

  <!-- TO THIS: -->
  <draggable tag="tbody">
    <tr v-for="featured in furds">
      ...
    </tr>
  </draggable>
<table>

【讨论】：