Как сделать перемещение столбцов у таблицы?

#vuejs

Что я хочу сделать, это перенести столбцы в таблице, допустим как в exel это реализовано.
Если взять весь столбец и переместить его допусти из B в A, то весь столбец перенесется
вместе с данными. Немного непонятно, как делается это во vue, да и логика непонятна:
как должно это выглядеть, так чтобы перенеслось и состояние столбцов сохранилось.

Моя песочница без самой реализации https://codesandbox.io/s/pyvjxxnnvj
в файле App.vue:27 если добавить атрибут draggable из библиотеки https://github.com/SortableJS/Vue.Draggable,
то я могу только header столбца переносить, а не весь столбец.

Пример:


    
        
        
          {{ column.label
}}
        
    



То я получу вот такой результат:





Типа такого надо https://akottr.github.io/dragtable/, только на vue.
    

Ответы

Ответ 1

Вот пример реализации.

При разработке использовался обычный тег table, а для перемещения колонок методы
mousedown, mouseover, mouseup.

Для начала перемещения используется событие mousedown (момент, когда кнопка мыши нажата, 
 но еще не отпущена).
При событии mouseover происходит обмен соседними колонками ( момент наведения мыши
на другую колонку )

При событии mouseup происходит завершение обмена.

Для анимации перемещения (обмена) взят пример из документации vue js.

Так как данные таблицы передается в компонент через свойства (props), то при завершении
обмена вызывается $emit sort с новым порядком колонок.

Соответственно, в родителе происходит обновление порядка колонок по событию sort.

Код:
    
      
        
          
            
          
        
        
          
          
            
          
          
        
      
    




Удачного программирования.