vue+element使用sortable拖拽实现行排序

大家好，我是小佑@小佐https://blog.csdn.net/Smell_rookie，是一名页面仔工程师，我会不定时在CSDN更新我的博客，有兴趣的可以点个关注来逛逛我的主页。

需求：有时我们想要做成这么一个效果——对ele的表格实现行排序，可以拖动！

借助sortable我们可以完成上述需求。

安装sortablejs

npm install sortable.js --save 或 yarn add sortable

引入并使用 在需要使用拖拽的.vue页面引入sortablejs 也可以全局的main.js中引入，挂载到vue跟实例中去。

import Sortable from 'sortablejs'

使用方法

mounted() {
  this.rowDrop()
},
methods: {
  //行拖拽
  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)
      }
    })
  },
}

注意

需要为el-table指定row-key=“id”，标示每行数据的唯一性id可以根据你的数据替换成其他唯一性的数据

完整代码

<template>
  <div>
    <el-table :data="tableData" border width="100%" `row-key="id"` align="left">
      <el-table-column width="50px">
        <template slot-scope="scope">
          <el-button type='text' v-show="scope.row.defaultValue === 1">默认</el-button>
        </template>
      </el-table-column>
      <el-table-column width="60px" label="序号" type="index">
      </el-table-column>
      <el-table-column prop="dataKey" label="值"></el-table-column>
      <el-table-column prop="dataValue" label="显示值"></el-table-column>
      <el-table-column label="操作" min-width="100">
        <template slot-scope="scope">
          <el-popover placement="top" v-model="scope.row.visible">
            <p>确定要删除当前内容？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" plain>取消</el-button>
              <el-button type="primary" size="mini">确定</el-button>
            </div>
            <el-button size="mini" type="danger" slot="reference">删除</el-button>
          </el-popover>
          <el-button size="mini" type="primary">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          dataKey: '值11',
          dataValue: '显示值11'
        },
        {
          id: 2,
          dataKey: '值22',
          dataValue: '显示值22'
        },
        {
          id: 3,
          dataKey: '值33',
          dataValue: '显示值33'
        },
        {
          id: 4,
          dataKey: '值44',
          dataValue: '显示值44'
        },
      ],
    }
  },
  mounted() {
    this.rowDrop()
  },
  methods: {
    //行拖拽
    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)
        }
      })
    },
  }
}
</script>

<style>
</style>

觉得有帮助的可以关注一下博主

标签：vue,const,tableData,tbody,element,sortable,dataKey,id,newIndex
来源： https://blog.csdn.net/Smell_rookie/article/details/115377073