Bootstrap

Element el-table表格表头拖拽、行拖拽组件封装详细教程【简单粗暴】



简介

  • el-table+Sortable.js实现表头拖拽、行拖拽
  • Sortable.js
    Sortable.js是一款优秀的js拖拽库,支持ie9及以上版本ie浏览器和现代浏览器,也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库,如Bootstrap、Element UI。你可以用来拖拽div、table等元素。
  • 效果
    在这里插入图片描述

安装

  • npm安装依赖
npm install sortablejs --save
  • 引入
import Sortable from 'sortablejs';

2. 使用

  • 表格表头必须加row-key,否则会出现排序错乱
  • 完整代码table.vue
<template>
  <!--  行列拖拽案例 -->
  <div style="padding: 20px">
    <el-table
      row-key="id"
      :header-cell-style="{ background:'#4faeef' , color:'#c1def3' }"
      :data="tableData">
      <el-table-column
        type="selection"
        width="35">
      </el-table-column>
      <el-table-column
        :prop="dropCol[0].prop"
        label="id"
        width="180">
      </el-table-column>
      <el-table-column
        :prop="dropCol[1].prop"
        label="日期"
        width="180">
        <template  slot-scope="scope">
            {{scope.row[dropCol[1].prop]}}
        </template>
      </el-table-column>
      <el-table-column
        :prop="dropCol[2].prop"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        :prop="dropCol[3].prop"
        label="地址"
        width="180"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  name: "index",
  data() {
    return {
      tableData: [
        {
          id: '1',
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 100 弄'
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 200 弄'
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 300 弄'
        },
        {
          id: '4',
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 400 弄'
        }
      ],
      // 动态表头
      dropCol: [
        {
          label: 'id',
          prop: 'id'
        },
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ]
    }
  },
  mounted() {
    this.rowDrop()
    this.columnDrop()
  },
  methods: {
    /**
     * 行拖拽
     */
    rowDrop() {
      // 要侦听拖拽响应的DOM对象
      const tbody = document.querySelector('.el-table__body-wrapper tbody');
      const _this = this;
      Sortable.create(tbody, {
        // 结束拖拽后的回调函数
        onEnd({newIndex, oldIndex}) {
          console.log('拖动了行,当前序号:' + newIndex);
          const currentRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currentRow);
        }
      })
    },
    /**
     * 列拖拽
     */
    columnDrop() {
      const _this = this;
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          // 跳过显示的列数量,如开头我们用了一个多选框

          const empty = 1
          const oldItem = _this.dropCol[evt.oldIndex- empty];
          this.newCol=evt.newIndex-1
          _this.dropCol.splice(evt.oldIndex- empty, 1);
          _this.dropCol.splice(evt.newIndex- empty, 0, oldItem);
          console.log(_this.dropCol)
        }
      });
    }
  }
}
</script>

3. 解析及常见问题

3.1 行拖拽
  • rowDrop()行拖拽方法实际上就是修改this.tableData的值
    在这里插入图片描述
3.2 表头列拖拽
  • 这里要实现拖拽表头,必须动态定义表头,如:dropCol
    在这里插入图片描述

  • 和表头进行绑定
    在这里插入图片描述

  • columnDrop()列拖拽方法实际上就是修改dropCol的值
    在这里插入图片描述

  • 如表格中使用插槽,可以这样定义
    在这里插入图片描述

  • 注意:这里拖拽只能实现数据改变,如插槽中放组件(按钮或其它),是不能拖拽的,只有数据会改变
    在这里插入图片描述

;