vuedraggable 如何只触发一个按钮？

Question

我正在使用 vue 实现 table 可拖动。但是，我想要的是只触发 v-icon 上的列按钮，但是当所有行都被按下时，所有触发器。如何将可拖动限制为仅某些列？

<v-data-table
    :headers="headers"
    loading-text="편성 리스트가 없습니다"
    :loading="loadingToggle"
    item-key="id"
    :items="adList"
    :hide-default-footer="true"
>
    <template v-slot:body="props">
        <draggable :list="props.items" tag="tbody">
            <tr v-for="(item, idx) in props.items" :key="idx">
                <td><v-icon>mdi-menu</v-icon></td>
                <td>{{ idx + 1 }}</td>
                <td>{{ item.Sid }}</td>
                <td>{{ item.companySid }}</td>
                <td>{{ item.companyName }}</td>
                <td>{{ item.gnName }}</td>
                <td>{{ item.Slot }}</td>
                <td>{{ item.StartDate }}</td>
                <td>{{ item.EndDate }}</td>
                <td>{{ item.StatusName }}</td>
            </tr>
        </draggable>
    </template>
</v-data-table>

Answer 1

您正在寻找 Vue.Draggable handles.

您可以只在 <draggable> 标签中指定 handle 属性和一些 CSS class，然后将此 CSS class 应用到您的 <v-icon> 或 <td> 标签。

可以创建多个句柄。

所以你的代码应该是这样的：

<v-data-table
  :headers="headers"
  loading-text="편성 리스트가 없습니다"
  :loading="loadingToggle"
  item-key="id"
  :items="adList"
  :hide-default-footer="true"
>
  <template v-slot:body="props">
    <draggable :list="props.items" tag="tbody" handle=".handle">
      <tr v-for="(item, idx) in props.items" :key="idx">
        <td><v-icon class="handle">mdi-menu</v-icon></td> <!-- first handle -->
        <td>{{ idx + 1 }}</td>
        <td>{{ item.Sid }}</td>
        <td>{{ item.companySid }}</td>
        <td>{{ item.companyName }}</td>
        <td>{{ item.gnName }}</td>
        <td class="handle">{{ item.Slot }}</td> <!-- second handle -->
        <td>{{ item.StartDate }}</td>
        <td>{{ item.EndDate }}</td>
        <td>{{ item.StatusName }}</td>
      </tr>
    </draggable>
  </template>
</v-data-table>

不要忘记默认情况下 v-data-table 组件会阻止您重新排序行。

既然你没有在问题中提到这个问题，我希望你已经解决了。但如果没有， or this discussion in issue 应该能帮到你。

vuedraggable 如何只触发一个按钮？

How to trigger only one button with vuedraggable?

vue.js

vuetify.js

vuedraggable

v-data-table