Example of implementing element table row and column dragging

The element ui table does not have a built-in drag-and-drop sorting function, and can only be implemented with the help of a third-party plug-in, Sortablejs. Let's take a look at the dynamic picture first to see if the effect is what you want.

First you need to install Sortable.js

npm install sortablejs --save

Then quote

import Sortable from 'sortablejs'

It should be noted that the element table must specify a row-key, which must be unique, such as an ID, otherwise incorrect sorting will occur.

###Sample code

<template>
  <div style="width:800px">

    <el-table :data="tableData"
      border
      row-key="id"
      align="left">
     <el-table-column v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :label="item.label"> 
      </el-table-column>
    </el-table>
    <pre style="text-align: left">
      {{dropCol}}
    </pre>
    <hr>
    <pre style="text-align: left">
      {{tableData}}
    </pre>
  </div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      col: [
        {
          label: 'Date',
          prop: 'date'
        },
        {
          label: 'Name',
          prop: 'name'
        },
        {
          label: 'Address',
          prop: 'address'
        }
      ],
      dropCol: [
        {
          label: 'Date',
          prop: 'date'
        },
        {
          label: 'Name',
          prop: 'name'
        },
        {
          label: 'Address',
          prop: 'address'
        }
      ],
      tableData: [
        {
          id: '1',
          date: '2016-05-02',
          name: '王小虎1',
          address: 'No. 100, Jinshajiang Road, Putuo District, Shanghai'
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王小虎2',
          address: 'No. 200, Jinshajiang Road, Putuo District, Shanghai'
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '王小虎3',
          address: 'No. 300, Jinshajiang Road, Putuo District, Shanghai'
        },
        {
          id: '4',
          date: '2016-05-03',
          name: '王小虎4',
          address: 'No. 400, Jinshajiang Road, Putuo District, Shanghai'
        }
      ]
    }
  },
  mounted() {
    this.rowDrop()
    this.columnDrop()
  },
  methods: {
    //Row drag rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },
    //Column drag 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)
        }
      })
    }
  }
}
</script>
<style scoped>
</style>

This concludes this article about the implementation examples of dragging rows and columns in element tables. For more relevant content on dragging rows and columns in element tables, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed explanation of dragging table columns using Vue Element Sortablejs
Elementui table component + sortablejs to implement row drag and drop sorting sample code
An example of how to use sortable+element to drag table rows

<<: How to set Nginx log printing post request parameters

>>: Summary of the use of html meta tags (recommended)