我想在BootstrapVue表上实现拖放功能。通过使用下面的代码,我只能拖放表头,但表项不会更改。我控制台记录了未定义的updatedHeaders。table screenshot
<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>
我想有复选框来选择我想显示的列,我可以拖放表列。
1条答案
按热度按时间g52tjvyc1#
您只能拖动放在
<draggable>
标记内的项目由于
<draggable>
标记中有表格标题,因此可以拖动它。查看项目文档了解如何使用Vue.Draggable组件。
updatedHeaders
数据属性没有声明。我猜你应该在vue数据中声明它,并在created()
钩子中填充头部。和
我不知道你的数据,所以你应该知道它更好,什么应该放在
updatedHeaders
。如果您想拖动表列,那么您必须使用
Vue.Dragabble
自己实现它,类似于您的header示例。