基于Bootstrap Vue的可拖动表格

Question

我一直在寻找一种方法，在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
            ]
    }
};

现在我一直收到这个错误：sortable bind hook中的错误：“TypeError：无法读取null的querySelector属性” 为什么它无法找到？

编辑：https://jsfiddle.net/d7jqtkon/

- Ari

---

你能为你的情况创建一个 fiddle 或 pen 吗？也许 querySelector 无法读取，因为 tbody 不可用，请尝试将代码添加到 document.addEventListener('DOMContentLoaded',function(){ }); 中。 - karthickj25

我遇到了相同的错误 https://jsfiddle.net/d7jqtkon/ @karthickj25 - Ari

Answer 1

在代码行 const table = el.querySelector('table'); 中，你试图获取表格元素。变量el是表格元素。这就是为什么当你使用querySelector时它返回null的原因。

在分配正确的表格变量之后，错误消失了。

  const table = el;    
  table._sortable = createSortable(table.querySelector("tbody"), binding.value, vnode);

链接到可工作的 fiddle 示例

- karthickj25

---

那真的有道理。感谢您的帮助，它现在按照预期工作。 :-) @karthickj25 - Ari

我也尝试了这个解决方案，但是我收到了一个错误提示，因为我的脚本不识别 return Sortable.create 中的标签 Sortable。 - HTLWelsITLover99

然后使用 npm install sortablejs 安装 Sortable，然后在你的 app.js 或者是作为 Vue 项目入口文件的任何其他文件中导入 import Sortable from 'sortablejs'。您可以在此处找到官方文档链接。 - Vidral Bonvi

Answer 2

new Vue({
  el: "#app",
    directives: {
    sortable: {
      bind(el, binding, vnode) {
        let self =el
        Sortable.create(el.querySelector('tbody'),{
          ...binding.value,
          vnode:vnode,
          onEnd: (e) =>  {
            let ids = el.querySelectorAll("span[id^=paper_]")
            let order = []
            for (let i = 0; i < ids.length; i++) {
              let item = JSON.parse(ids[i].getAttribute('values'))
              //extract items checkbox onChange v-model
              let itemInThisData = vnode.context.items.filter(i => i.id==item.id)
              order.push({
                id:item.id,
                paper: item.paper,
                domain:item.domain,
                platform: item.platform,
                country:item.country,
                sort_priority: item.sort_priority,
                selectpaper:itemInThisData[0].selectpaper
              })
            }
            binding.value = []
            vnode.context.items = []
            binding.value = order
            vnode.context.items = order
            console.table(vnode.context.items)
          },
        });
      },    
    }
  },
  mounted() {
    this.totalRows = this.items?this.items.length: 0
  },
  methods:{
    onFiltered(filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length
      this.currentPage = 1
    },
    log(){
      console.table(this.items)
      console.log(this)
    },
  },
  data(){
    return {
    rankOption:'default',
    totalRows: 1,
    currentPage: 1,
    filter: null,
    filterOn:[],
    sortBy:'paper',
    sortDesc: false,
    sortableOptions: {
      chosenClass: 'is-selected'
    },
    perPage: this.results_per_page==='Todo' ? this.items.length : this.results_per_page?this.results_per_page:50,
    pageOptions: [10, 50, 100, 500,'Todo'],
    sortDirection: 'asc',
    fields : [
      { key: 'paper', label: 'Soporte', sortable: true},
      { key: 'domain', label: 'Dominio', sortable: true},
      { key: 'platform', label: 'Medio', sortable: true},
      { key: 'country', label: 'País', sortable: true},
      { key: 'sort_priority', label: 'Rank', sortable: true},
      { key: 'selectpaper', label: 'Selección', sortable: true},
    ],
    items : [
      {
        id:12,
        paper: 'Expansion',
        domain:'expansion.com',
        platform: 'p',
        country:'España',
        sort_priority: '',
        selectpaper:false
      },
      {
        id:13,
        paper: 'El economista',
        domain:'eleconomista.es',
        platform: 'p',
        country:'España',
        sort_priority: '',
        selectpaper:false
      },
      {
        id:14,
        paper: 'El país',
        domain:'elpais.es',
        platform: 'p',
        country:'España',
        sort_priority: '',
        selectpaper:false
      }
    ]
  }
    }
})

<div id="app">
<template id="">
  <b-table
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc"
  v-sortable="items"
  show-empty
  small
  stacked="md"
  :items="items"
  :fields="fields"
  :current-page="currentPage"
  :per-page="perPage"
  :filter="filter"
  :filterIncludedFields="filterOn"
  :sort-direction="sortDirection"
  @filtered="onFiltered"
  >
  <template v-slot:cell(selectpaper)="row">
    <span :id="'paper_'+row.item.id" :values="JSON.stringify(row.item)"></span>
    <b-form-group>
      <input  type="checkbox" @change="log" v-model="row.item.selectpaper" />
    </b-form-group>
  </template>
  <template v-slot:cell(sort_priority)="row" v-if="rankOption==='foreach-row'">
    <b-form-group>
      <b-form-input type="number"  @change="log"
      size="sm" placeholder="Rank" v-model="row.item.sort_priority">
    </b-form-input>
  </b-form-group>
  </template>
  </b-table>
</template>
</div>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

- xiser