element-ui table 表格组件实现可拖拽效果（行列）

Posted 2021-10-16 BBinChina

首先，需要用到第三方库，sortable.js，因为我的项目是vue，所以在package引用的是vuedraggable，而vuedraggable是包含sortable的。

npm install sortable.js --save
// 或者
npm i -S vuedraggable
// vuedraggable依赖 Sortable.js，所以下载了vuedraggable，我们便可以直接引入Sortable使用Sortable的特性。
// vuedraggable是Sortable一种加强，实现组件化的思想，可以结合Vue，使用起来更方便

Demo

<template>
	<div>
		<el-table id="tableId"
          :data="tableData"
          style="width: 100%"
          header-row-class-name="table-header"
          row-key="id">
			<el-table-column
            label="demoColumn"
            header-align="center"
            align="center"
            prop="demoColumn"
          ></el-table-column>
		</el-table>
	</div>
</template>
<script>
export default {
  data() {
  	return {
  		tableData;
  	}
  }
  methods: {
  	//表格拖拽
    rowDrop() {
      const tbody = document.querySelector(
        "#tableId.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);
        },
      });
    },
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('#tableId.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)
        }
      })
    }
  },
  mounted() {
    // 阻止表格默认行为，用于实现拖拽
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
    this.rowDrop();
    this.columnDrop();
  },
}
</script>

<style lang="less" scoped>

</style>

总结

1、在mounted的时候更改表格的默认行为。
2、更改表格默认行为时，更改了element的标签事件