Как сделать так чтобы колонки в таблице Element Plus были draggable?

Question

[Daniil161rus]

На проекте использую таблицу el-table из библиотеки Element Plus и draggable для перестановки колонок, но возникают ошибки:
Unhandled error during execution of mounted hook
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'updated')

код:

<template>
    <el-table :data="tableData" style="width: 100%">
        <draggable
              tag="el-table-header"
              :list="visible_columns_new"
              :component-data="getComponentData()"
              item-key="id"
            >
                <el-table-column v-for="item in tableColumns" :prop="item.prop" :key="item.prop" :label="item.label">
                     <template #header="scope"> <span style="cursor: move">⠿</span> {{ scope.column.label }} </template>
                     <template #default="scope"> <span>{{ scope.row[item.prop]}}</span> </template>
                </el-table-column>
        </draggable>
    </el-table>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import draggable from 'vuedraggable'


    const tableColumns = [
        { id: 1, prop: 'date',  label: 'Date' },
        { id: 2, prop: 'name',  label: 'Name' },
        { id: 3, prop: 'state',  label: 'State' },
        { id: 4, prop: 'city',  label: 'City' },
    ]
    const tableData = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
      },
    ])

const getComponentData = () => {
  return {
    wrap: true
  }
}
</script>

Возможно кто-то знает другой подход, буду рад любой помощи

Comments

[Aetae]

Скорее всего проблема где-то в другом месте.
Ошибка тебе человеческим языком говорит, что где-то в хуке onMounted ты делаешь <что-то>.updated и это "что-то" - пустое.

Answer 1

[0xD34F]

Можно попробовать использовать sortable.js:

<el-table
  ref="table"
  ...
>
  ...

const table = ref();

onMounted(() => { 
  new Sortable(table.value.$el.querySelector('thead tr'), {
    handle: 'span',
    onEnd(e) {
      columns.value.splice(e.newIndex, 0, columns.value.splice(e.oldIndex, 1)[0]);
    },
  });
});

Comments

[Daniil161rus]

Спасибо, с sortable.js получилось