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

Example code for implementing fullpage.js full-screen scrolling effect with CSS

When I was studying CSS recently, I found that I ...

Six weird and useful things about JavaScript

Table of contents 1. Deconstruction Tips 2. Digit...

Several common methods of CSS equal height layout

Equal height layout Refers to the layout of child...

Summary of how to add root permissions to users in Linux

1. Add a user . First, use the adduser command to...

Detailed explanation of the usage of scoped slots in Vue.js slots

Table of contents No slots Vue2.x Slots With slot...

CSS optimization skills self-practice experience

1. Use css sprites. The advantage is that the smal...

How to configure nginx to return text or json

Sometimes when requesting certain interfaces, you...

Detailed explanation and examples of database account password encryption

Detailed explanation and examples of database acc...

The complete process of Docker image creation

Table of contents Preface Creation steps Create a...

Tutorial on installing PHP on centos via yum

First, let me introduce how to install PHP on Cen...

jQuery realizes the shuttle box function

This article example shares the specific code of ...

MySql index improves query speed common methods code examples

Use indexes to speed up queries 1. Introduction I...

MySQL multi-instance installation boot auto-start service configuration process

1.MySQL multiple instances MySQL multi-instance m...

JavaScript to achieve a simple message board case

Use Javascript to implement a message board examp...