Element UI table表格行拖动排序-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element UI table表格行拖动排序。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

先看第一种效果：拖动表格行进行拖动排序

element表格拖拽改变顺序,ui,前端,elementui

第二种效果拖动指定按钮进行拖动排序 element表格拖拽改变顺序,ui,前端,elementui

前提是已经运行项目，并安装并配置element ui

直接上代码：Html部分

<template>
  <div class="table_count">
    <el-table
        :data="tableData"
        border
        id="table_count"
        stripe
        style="width: 100%">
      <el-table-column
          prop="date"
          label="日期"
          align="center"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          align="center"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          align="center"
          label="地址">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template>
          <i class="el-icon-rank handle"></i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

JS部分

<script>
import Sortable from 'sortablejs'

export default {
  name: "Tab_index",
  data() {
    return {
      oldList: [],
      tableData: [{
        date: '2016-05-02',
        name: '周伯通',
        address: '东北那嘎达的'
      }, {
        date: '2016-05-04',
        name: '欧阳锋',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '黄老邪',
        address: '桃花岛'
      }, {
        date: '2016-05-03',
        name: '无崖子',
        address: '西天大雷音寺1516 弄'
      }]
    }
  },
  mounted() {
    this.rowDrop()
  },
  methods: {
    rowDrop() {
      console.log(23)
      const el = document.querySelector('#table_count .el-table__body-wrapper tbody')
      new Sortable(el, {
        animation: 150,
        handle: '.handle',
        ghostClass: 'blue-background-class'
      });
    }
  }
}
</script>

所依赖关键插件为：sortablejs 官网地址

想要用第一种效果，需要去掉 new Sortable中 handle配置项，其中第一个参数为需要拖拽的HTML元素节点文章来源地址https://www.toymoban.com/news/detail-692159.html

到了这里，关于Element UI table表格行拖动排序的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！