VUE +element el-table运用sortable 拖拽table排序，实现列拖动

最新推荐文章于 2024-08-02 11:25:35 发布

cheng_chunxiao

最新推荐文章于 2024-08-02 11:25:35 发布

阅读量3.8k

点赞数

本文链接：https://blog.csdn.net/cheng_chunxiao/article/details/102857817

版权

本文介绍了如何在Vue项目中结合Element UI的el-table组件，使用sortable库来实现列的拖动排序功能，提供了详细的安装步骤和代码参考链接。

摘要由CSDN通过智能技术生成

安装sortable

cnpm install --save sortablejs

代码

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
      v-for="(item, index) in col"
      :key="`col_${index}`"
      :prop="dropCol[index].prop"
      :label="item.label">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import Sortable from 'sortablejs'
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 15