在BootstrapVue表中，只能拖放表头，表项不能改变

Question

我想在BootstrapVue表上实现一个拖放功能。通过使用下面的代码，我只能拖放表头，但表项不会改变。我控制台记录了未定义的updatedHeaders。表截图

<template>
<div class="container mt-5">
<div class="row">
<h3>Managing Existing Accounts</h3>
</div>
<div class="row mt-3">
This section shows all accounts you currently manage.<br>
Click on a row to open up details about that account.<br>
Accounts that have expired will have all their personally identifiable information scrubbed in 90 days.
</div>
<!--toggle for column customization-->
<div>
<b-button v-b-toggle.column-collapse variant="primary">Column</b-button>
<b-collapse id="column-collapse" class="mt-2">
<b-card>
<p class="card-text">Choose the column</p>
<b-form-checkbox-group v-model="selectedColumns">
<b-form-checkbox value="Renew Date">Renew Date</b-form-checkbox>
<b-form-checkbox value="Account Name">Account Name</b-form-checkbox>
<b-form-checkbox value="Location">Location</b-form-checkbox>
<b-form-checkbox value="Type">Type</b-form-checkbox>
<b-form-checkbox value="Account Type">Account Type</b-form-checkbox>
</b-form-checkbox-group>
</b-card>
</b-collapse>
<div>
<table class="table table-striped">
<thead class="thead-dark">
<draggable v-model="updatedHeaders" tag="tr" @end="dragged">
<th v-for="header in headers" :key="header" scope="col">
{{ header }}
</th>
</draggable>
</thead>
<tbody>
<tr v-model="updatedHeaders" v-for="item in items" :key="item.gymID">
<td v-for="header in headers" :key="header">{{ item[header] }}</td>
</tr>
</tbody>
</table>
</div>
<rawDisplayer class="col-2" :value="items" title="Items"/>
<rawDisplayer class="col-2" :value="updatedHeaders" title="Headers"/>
</div>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: {
draggable,
},
data() {
return {
dataLoaded: false,
accountList: [],
items: [],
selectedColumns: ['Renew Date', 'Account Name', 'Location', 'Type', 'Account Type'],
_xsrf: "",
};
},
created() {
// Load the saved column order from local storage
const headers = localStorage.getItem('tableHeaders');
if (headers !== "undefined") {
const selectedFields = JSON.parse(headers);
this.selectedColumns = selectedFields.map(field => field.label);
}
fetch('/distributor/api/managing-existing-accounts')
.then(response => response.json())
.then(data => {
this.accountList = data.accountList;
this.items = data.accountList;
this.dataLoaded = true;
this._xsrf = data._xsrf;
})
.catch(error => {
console.error('Error fetching data:', error);
});
},
computed: {
filteredFields() {
if (this.dataLoaded) {
return Object.keys(this.items[0] ? this.items[0] : {})
.filter(field => this.selectedColumns.includes(field))
.map(field => ({
key: field,
label: field
}));
}
},
headers() {
console.log(this.updatedHeaders);
return this.updatedHeaders ? this.updatedHeaders : this.filteredFields?.map(field => field.key);
},
},
methods: {
dragged() {
// Map the new order of headers to their corresponding labels
const updatedLabels = this.updatedHeaders?.map(header => this.filteredFields.find(field => field.key === header).label);
// Save the new order of headers to local storage
localStorage.setItem('tableHeaders', JSON.stringify(this.headers));
}
}
}
</script>
<style>
/* Add your styles here */
</style>

我想要有复选框来选择我想要显示的列，我可以拖放表格的列。

Answer 1

您只能拖动放置在<draggable>标签内的项目

<draggable v-model="updatedHeaders" tag="tr" @end="dragged">
<th v-for="header in headers" :key="header" scope="col">
{{ header }}
</th>
</draggable>

由于表头位于<draggable>标记内，因此可以拖动它。

查看项目文档，了解如何使用Vue。可拖动的组件。

未声明updatedHeadersdata属性。我猜你应该在值数据中声明它，并在created()钩子中填充标题。

data() {
return {
updatedHeaders: [], // <- here
dataLoaded: false,
...

和

if (headers !== "undefined") {
const selectedFields = JSON.parse(headers);
this.selectedColumns = selectedFields.map(field => field.label);
this.updatedHeaders =  ???  selectedFields  // not sure about your data.
}

我不知道你的数据，所以你应该更好地了解它，updatedHeaders应该放什么。

如果你想拖拽表列，那么你必须自己使用Vue.Dragabble实现它，类似于你的头的例子。