我一直在寻找一种在 Bootstrap Vue 表格上拖放行的方法。 我能够在这里找到一个工作版本:Codepen
我已经尝试将此代码实现到我自己的表中:
模板:
<b-table v-sortable="sortableOptions" @click="(row) => $toast.open(`Clicked ${row.item.name}`)" :per-page="perPage" :current-page="currentPage" striped hover :items="blis" :fields="fields" :filter="filter" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :sort-direction="sortDirection" @filtered="onFiltered">
<template slot="move" slot-scope="row">
<i class="fa fa-arrows-alt"></i>
</template>
<template slot="actions" slot-scope="row">
<b-btn :href="'/bli/'+row.item.id" variant="light" size="sm" @click.stop="details(cell.item,cell.index,$event.target)"><i class="fa fa-pencil"></i></b-btn>
<b-btn variant="light" size="sm" @click.stop="details(cell.item,cell.index,$event.target)"><i class="fa fa-trash"></i></b-btn>
</template>
<template slot="priority" slot-scope="row">
<input v-model="row.item.priority" @keyup.enter="row.item.focussed = false; updatePriority(row.item), $emit('update')" @blur="row.item.focussed = false" @focus="row.item.focussed = true" class="form-control" type="number" name="priority" >
</template>
</b-table>
脚本:
import Buefy from 'buefy';
Vue.use(Buefy);
const createSortable = (el, options, vnode) => {
return Sortable.create(el, {
...options
});
};
const sortable = {
name: 'sortable',
bind(el, binding, vnode) {
const table = el.querySelector('table');
table._sortable = createSortable(table.querySelector('tbody'), binding.value, vnode);
}
};
export default {
name: 'ExampleComponent',
directives: { sortable },
data() {
let self = this;
return {
blis: [],
currentPage: 1,
perPage: 10,
pageOptions: [ 5, 10, 15 ],
totalRows: 0,
sortBy: null,
sortDesc: false,
sortDirection: 'asc',
sortableOptions: {
chosenClass: 'is-selected'
},
filter: null,
modalInfo: { title: 'Title', content: 'priority' },
fields: [
{
key: 'move',
sortable: true
},
///...rest of the fields
]
}
};
现在我收到了这个错误:指令可排序绑定(bind)钩子(Hook)出错:“类型错误:无法读取 null 的属性‘querySelector’”
为什么找不到 <tbody>
?
最佳答案
在 const table = el.querySelector('table');
行中,您正在尝试获取表格元素。 var el
是表格元素。这就是为什么当您使用 querySelector
分配正确的表变量后错误消失
const table = el;
table._sortable = createSortable(table.querySelector("tbody"), binding.value, vnode);
关于javascript - 带有 bootstrap vue 的可拖动表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54670693/