el-table はリスト列のドラッグを実装します

1. まずニーズを検討します。

オリジナル：

欲しい：

ps: この図は直感的ではありません。目的は、列をドラッグして表示できるようにすることで、ドラッグした順序で特定の列を表示できるようにすることです。動画はアップロードできません、ごめんなさい！

1. まず、コンポーネントライブラリは列のドラッグをサポートしていませんが、自分で行うことも、他の JS ライブラリを使用して実装することもできます。

npm install sortablejs --save

興味があれば、sortablejs の公式 Web サイトをチェックしてください。

2. プラグインをインポートします。

import Sortable from 'sortablejs'

3. コードをアップロードします。

html: el-table コンポーネント。ここではカプセル化を使用します。カプセル化がない場合は、<el-table></el-table> を直接使用してください。


      <!-- 表格数据,只展示和列拖拽相关的代码 -->
      <EleUITable
        :rowKey="columnDropId"
      >

js：

// 计算属性 给到上面的rowKey，且rowKwy必须绑定唯一值
 computed: {
    columnDropId() {
      this.customHeader.headData.forEach(e => {
        if (e.name) {
          return e.name
        } else {
          return e.type
        }
      })
    }
  },

// 生命周期
mounted(){
    this.dropCol = this.customHeader.headData
    this.getCustomHeader()
    this.columnDrop()
  },

// 方法
methods: {
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
           // 下面是我自己的业务逻辑，同仁们可自行对自己的业务逻辑进行分析
          // this.customHeader.headData = this.dropCol
          // this.isColumnDrop = this.dropCol
        }
      })
    },

4. 上記のコードをコピーした後、何かバグに遭遇しましたか? ここでバグが発生しました。バグ: 列をドラッグした後、テーブルのヘッダーは移動しませんが、データは移動します。元のテーブルのヘッダーは [1,2,3] で、テーブルのヘッダー 1 と 2 の位置を入れ替えます。 , しかし、ドラッグ後のヘッダーは[1,2,3]のままですが、ヘッダー1と2のデータが変更されています。その理由は、el-table をカプセル化するときに v-for が使用され、バインドされたキー値が一意ではないため、この問題が発生します。キーの値を一意にするだけです。

もう一つ言ってください：

以前 el-table コンポーネントを使用したとき、1 ページに複数の el-table を使用し、バインドされたキー値がすべて i であり、テーブルデータの混乱を引き起こしたため、このキー値の一意性を確保するのが最善です。

質問がありましたら、他の人に誤解を与えないように、時間内に質問してください。ありがとうございます。

el-table はリスト列のドラッグを実装します

もう一つ言ってください：

おすすめ