我希望能够使用这个库只拖动一些列。 https://sortablejs.github.io/Vue.Draggable/#/table-column-example
我想要做的是有一个有两行的标题，并且只允许拖动一些列。然而，现在这是不可能的。
- handle(item-handle) 指定的元素可以移动，但结果不会改变。
- 错误输出到控制台。
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'key' of undefined"
TypeError: Cannot read property 'key' of undefined
- 显示不受拖动的列，以便可以通过拖动更改其位置。
我怎样才能消除这些问题？
版本
- “vue”：“^2.6.11”
- “vuedraggable”：“^2.24.0”
- “引导程序”：“^2.16.0”
Vue 源码
<template>
<div class="row">
<div class="col-8">
<h3>Draggable table</h3>
<table class="table table-striped">
<thead class="thead-dark">
<draggable
v-model="headers"
element="tr"
:options="{ handle: '.item-handle', group:'data-group' }"
@end="draggableEnd"
>
<th>Check</th>
<th v-for="header in headers" :key="header.key" scope="col" id="data-group">
<span class="item-handle">::</span>
{{ header.name }}
</th>
<th>End</th>
</draggable>
<tr>
<th>none</th>
<th v-for="header2 in headersSecond" :key="header2.key" scope="col">
<input type="text" :name="header2.key" :placeholder="header2.name" />
</th>
<th>none</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.name">
<td>
<input type="checkbox" />
</td>
<td v-for="header in headers" :key="header.key">{{ item[header.key] }}</td>
<td>END</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
name: "Drag",
methods: {
draggableEnd(event) {
console.log(event);
this.headers.forEach((data, index) => {
console.log("index:" + index, data.key, data.name);
});
},
},
components: {
draggable,
},
data() {
return {
headers: [
{ key: "id", name: "ID" },
{ key: "name", name: "NAME" },
{ key: "sport", name: "SPORTS" },
],
headersSecond: [
{ key: "id", name: "ID2" },
{ key: "name", name: "NAME2" },
{ key: "sport", name: "SPORTS2" },
],
list: [
{ id: 1, name: "Abby", sport: "basket" },
{ id: 2, name: "Brooke", sport: "foot" },
{ id: 3, name: "Courtenay", sport: "volley" },
{ id: 4, name: "David", sport: "rugby" },
],
dragging: false,
};
},
};
</script>