Example of implementing element table row and column dragging

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)

Recommend

MySQL establishes efficient index example analysis

This article uses examples to describe how to cre...

Detailed explanation of querying JSON format fields in MySQL

During the work development process, a requiremen...

Linux redis-Sentinel configuration details

download Download address: https://redis.io/downl...

How to disable foreign key constraint checking in MySQL child tables

Prepare: Define a teacher table and a student tab...

Detailed explanation of the wonderful uses of SUID, SGID and SBIT in Linux

Preface Linux's file permission management is...

CSS animation combined with SVG to create energy flow effect

The final effect is as follows: The animation is ...

A brief analysis of MySQL explicit type conversion

CAST function In the previous article, we mention...

How to install SVN server under Linux

1. Yum installation yum install subversion 2. Con...

How to install mysql database in deepin 2014 system

Deepin 2014 download and installation For downloa...

A Deep Dive into JavaScript Promises

Table of contents 1. What is Promise? 2. Why is t...

Implementation of vue+drf+third-party sliding verification code access

Table of contents 1. Background 2. Verification p...