sortable not dragging all columns of table in safari

廉价感情. 提交于 2021-01-27 13:03:34

问题


I have a vue bootstrap table that uses custom template for every cell using v-slot. All these cells are a custom component. I want the rows of this table to be sortable, that is, I want the users to be able to drag and drop rows in that table. for this I am using sortable JS. Everything is working fine. But I have a UI distortion in safari when dragging any row in the table.

Normal table:

table when I am dragging the first row in safari:

notice that the last column UI does not look like the row is getting dragged.

Here's code for table:

<template>
  <b-table
    v-sortable="sortableOptions"
    :items="getSortedForms"
    :fields="columns"
    :tbody-tr-class="rowClass"
    primary-key="key"
    show-empty
  >
    <template v-slot:empty>
      <!-- some content here -->
    </template>

    <template v-if="getSortedForms.length > 0" v-slot:head(selectFormAction)>
      <!-- check-box HTML here -->
    </template>
    <template v-slot:cell(col1)="form">
      <div :id="form.value.Key">
        <!-- check-box HTML here -->
      </div>
    </template>
    <template v-slot:cell(col2)="formItem">
      <!-- this is a custom component -->
      <form-display :formDTO="formItem.value" />
    </template>
    <template v-slot:cell(col3)="formStatusItem">
        <!-- some text here -->
      </div>
    </template>
    <template v-slot:cell(col4)="actionItem">
      <div>
        <!-- this is a custom component -->
        <form-progress-bar />
      </div>
    </template>
    <template v-slot:cell(col5)="utilityItem">
      <div class="utilitySet">
        <div
          v-for="(utility, id) in getSomeList()"
          :key="id"
        >
          <FormUtility :form="utilityItem.value.formDTO"></FormUtility>
        </div>     
      </div>
    </template>
  </b-table>
</template>

<script>
import { BTable } from "bootstrap-vue";
export default {
  name: "FormsList",
  directives: {
    sortable: {
      bind(el, binding, vnode) {
        const table = el;       
        Sortable.create(table.querySelector("tbody"), {});
      },
    },
  },
  components: {
    BTable,
  },
  data() {
    ...
  },
  computed: {
    ...
  },
  methods: {
    ...
  }
};

来源:https://stackoverflow.com/questions/61936500/sortable-not-dragging-all-columns-of-table-in-safari

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!