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