html 테이블 열 끌어서 놓기 방법

html 테이블 열 끌어서 놓기 방법

나는 html 테이블을 가지고 있다.행이 아니라 열을 끌어서 놓기를 원한다.나는 vue.js를 사용하고 있다.

각 행에는 전달할 수 있는 고유한 상위 요소가 있기 때문에 행을 끌거나 놓기가 쉽다.draggable="true". 열의 경우, 각각 행인 부모 안에 포함되어 있다.그래서 나는 토착민에 합격할 수 없다.draggable="true"테이블의 전체 열까지.

그리고 나서 나는 이 도서관을 찾았다: https://github.com/kutlugsahin/vue-smooth-dnd, 그러나 이것은 나에게 칼럼 끌기 옵션을 주지 않는다.

내가 원하는 것을 어떻게 이룰 수 있을까? 위의 플러그인으로 가능하다면 더 좋을 것이다.

요소 UI의 테이블을 사용하고 사용자 지정 방법을 작성하여 드래그 앤 드롭 설정:

initializeDragAndDropFunctionality() {
  const tableColumn = this.$refs.tableRef.$el.querySelector(
    '.el-table__header-wrapper .el-table__header thead tr'
  );
  Sortable.create(tableColumn, {
    draggable: 'th',
    onEnd: this.dragReorderColumn
  });
}

구성 요소의 마운트에서 호출된다.

  mounted() {
    this.initializeTable();
  },

표에서 ref에 대한 값을 설정해야 함:

  <el-table
      ref="tableRef"
    >
      <el-table-column
        v-for="(column, index) in tableTitles"
        :label="column.title"
        :prop="column.field"
        :width="column.width"
      >
      </el-table-column>
    </el-table>

구성 요소가 Sortablejs를 사용하는 util 클래스를 가져오는 경우:

import Sortable from 'sortablejs';

const vueSortable = {
  ...Sortable,
  create(el, options) {
    function swap(draggableSelector, movedElement, oldIndex, newIndex) {
      const parent = movedElement.parentNode;
      const cells = parent.querySelectorAll(draggableSelector);

      if (oldIndex > newIndex) {
        parent.insertBefore(movedElement, cells[newIndex]);
      } else {
        // inserts after trs[oldIndex] - if nextSibling is null insertBefore puts item to the end
        parent.insertBefore(movedElement, cells[newIndex].nextSibling);
      }
    }

    const tmpStorage = {};

    const newOptions = {
      ...options,
      onEnd(evt) {
        swap(options.draggable, evt.item, evt.newIndex, evt.oldIndex);

        tmpStorage.onChange = undefined;

        if (options.onEnd) {
          try {
            options.onEnd(evt);
          } catch (ex) {
            console.error('Error at onEnd:', ex);
          }
        }
      }
    };

    return Sortable.create(el, newOptions);
  }
};

export default vueSortable;

나는 또한 테이블의 열을 끌고 싶다.나는 이 해결책을 찾았다.당신이 해야 할 일은 tead 키만 다시 주문하면 데이터가 다시 렌더링될 것이다.

<el-table border :data="tableData" size="mini" >
      <el-table-column
        v-for="(item, index) in elTheadList"
        :prop="dataTheadList[index]"
        :label='item'
        :key="`thead_${index}`"
       >
      </el-table-column>
    </el-table>
data() {
    return {
      tableData: [{
        date: '2016-05-01',
        name: 'Cristian Millan',
        address: 'Baja #11'
      },{
        date: '2016-05-02',
        name: 'Jorge Cabrera',
        address: 'Progreso #18'
      },{
        date: '2016-05-03',
        name: 'Armando Mendivil',
        address: 'Novena #12'
      }],
      dataTheadList: [
        'date',
        'name',
        'address'
      ],
      elTheadList: ['Date', 'Name', 'Address'],
    }
  },

mounted() {
   const el = document.querySelector('.el-table__header-wrapper tr')
   this.sortable = Sortable.create(el, {
    animation: 180,
    delay: 0,
    onEnd: evt => {
      const oldItem = this.dataTheadList[evt.oldIndex]
      this.dataTheadList.splice(evt.oldIndex, 1)
      this.dataTheadList.splice(evt.newIndex, 0, oldItem)
    }
  })
  }

참조URL: https://stackoverflow.com/questions/57215952/how-do-i-drag-drop-html-table-columns