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

Question

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

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

Пример:

<thead>
    <tr>
        <th><input type="checkbox" v-model="selectAll" @click="select"></th>
        <draggable>
          <th v-for="column in columns" @click="sortBy(column.name)">{{ column.label }}</th>
        </draggable>
    </tr>
</thead>

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

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

Answer 1

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

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

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

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

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

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

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

Код:

</p>

<script>
export default {
  name: 'TableSortable',
  props: {
    rows:    { type: Array, default: () => ([]) },
    columns: { type: Array, default: () => ([]) },
  },
  data: () => ({
    isDraggbleColumn: null
  }),
  created() {
    document.onmouseup = this.ClearDraggble
  },
  beforeDestroy() {
    document.removeEventListener('mouseup', this.ClearDraggble)
  },
  methods: {
    sort(column2) {
      if (!this.isDraggbleColumn || column2 == this.isDraggbleColumn) return;
      let columns = [...this.columns]
      let indexColumn1 = columns.findIndex( column => column == this.isDraggbleColumn )
      columns.splice(indexColumn1, 1)
      let indexColumn2 = columns.findIndex( column => column == column2 )
      let append = (indexColumn1 == indexColumn2) ? 1 : 0;
      columns.splice(indexColumn2 + append, 0, this.isDraggbleColumn)
      this.$emit('sort', columns)
    },
    ClearDraggble() {
      this.isDraggbleColumn = null
    }
  }
}
</script>

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