Перетаскиваемый стол с начальной загрузкой - PullRequest
Новая
       11

Перетаскиваемый стол с начальной загрузкой

0 голосов
/ 13 февраля 2019

Я искал способ перетаскивать строки в таблице 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
                ]
        }
    };

Теперь я получаю эту ошибку: Ошибка в директиве сортируемого связывания ловушки: "Ошибка типа: Не удается прочитать свойство 'querySelector' из null"

Почему он не может найти <tbody>?

1 Ответ

0 голосов
/ 14 февраля 2019

В строке const table = el.querySelector('table'); вы пытаетесь получить элемент таблицы.Var el является элементом таблицы.Вот почему он возвращает ноль, когда вы используете querySelector

после назначения правильной табличной переменной, ошибка исчезает 

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

Ссылка на рабочую скрипку

...