这次给大家带来使用element-ui table实现拖拽功能，使用element-ui table实现拖拽功能的注意事项有哪些，下面就是实战案例，一起来看一下。
element-ui 的 table 组件很强大，但是我们的需求更强大...
简单粗暴的来一发效果图：
一、数据驱动
传统的拖动效果，都是基于通过 mousedown、mousemove、mouseup 事件来修改删减 dom 节点
但 vue 是一个数据驱动的前端框架，开发时应尽量避免操作 dom
而且 element-ui 的 table 组件封装得很严谨，直接操作 dom 很容易产生不可预计的 bug
所以我的核心思路就是：通过一个数组渲染表头（列），然后修改这个数组的顺序，从而修改列表的列排序
template 部分：
<p class="w-table" :class="{'w-table_moving': dragstate.dragging}"> <el-table :data="data" :border="option.border" :height="option.height" :max-height="option.maxheight" :style="{ width: parseint(option.width)+'px' }" :header-cell-class-name="headercellclassname" >  <slot name="fixed"></slot>  <el-table-column v-for="(col, index) in tableheader" :key="index" :prop="col.prop" :label="col.label" :width="col.width" :min-width="col.minwidth" :type="col.type" :header-align="col.headeralign" :column-key="index.tostring()" :render-header="renderheader" >  </el-table-column> </el-table> </p>
上面的 data 是列表数据集合，option 是 table 组件配置项，header 是表头数据集合，由父组件传入
props: { data: {  default: function () {  return []  },  type: array }, header: {  default: function () {  return []  },  type: array }, option: {  default: function () {  return {}  },  type: object } }
配置项可以根据 element-ui 的 api 自行删减
但有几个参数在组件内部被征用：
1. header-cell-class-name
绑定了一个函数，动态给表头单元格添加 class，从而实现拖动中的虚线效果。
2. column-key
绑定为 header 数组的 index，用于确定需要修改的 header 元素下标
3. render-header
表头渲染函数，用以添加自定义方法，以监听 mousemove 等相关事件
二、记录拖动状态
拖动过程中需要记录几个关键参数：
data () { return {  tableheader: this.header,  dragstate: {  start: -1, // 起始元素的 index  end: -1, // 结束元素的 index  move: -1, // 移动鼠标时所覆盖的元素 index  dragging: false, // 是否正在拖动  direction: undefined // 拖动方向  } } }
另外父元素传入了一个表头数据 header，但拖动完成后会修改这个数据
在子组件中直接修改父元素的数据是不推荐的，所以这里初始化了一个 tableheader 用于托管表头数据 header
但为了让 header 修改时，tableheader 也能响应修改，就得添加一个监视器 watch
watch: { header (val, oldval) {  this.tableheader = val } }
三、自定义表头
element-ui 的 table 组件为了实现【拖拽边框以修改列宽】的功能，没有将 mousemove、mouseup、mousedown 这三个事件暴露出来
所以需要自定义表头，并手动添加鼠标事件的处理函数，这就需要用到 renderheader() 方法
renderheader (createelement, {column}) {  return createelement(  'p', {   'class': ['thead-cell'],   on: {   mousedown: ($event) => { this.handlemousedown($event, column) },   mouseup: ($event) => { this.handlemouseup($event, column) },   mousemove: ($event) => { this.handlemousemove($event, column) }   }  }, [   // 添加 <a> 用于显示表头 label   createelement('a', column.label),   // 添加一个空标签用于显示拖动动画   createelement('span', {   'class': ['virtual']   })  ]) },
三个鼠标事件中，第一个参数是事件对象，第二个是表头对象
在对应的处理函数中，可以通过 column.columnkey 获取到对应的表头元素下标 index
空标签 <span class="virtual"> 用来显示拖动时的动画（虚线）
四、事件处理
按下鼠标时，记录下起始列。鼠标抬起时，记录下结束列。根据二者之差计算出拖动的方向。
然后根据起始列和结束列的位置，将表头数据重新排序，从而实现列的拖动
拖动过程的处理函数如下：
// 按下鼠标开始拖动handlemousedown (e, column) { this.dragstate.dragging = true this.dragstate.start = parseint(column.columnkey) // 给拖动时的虚拟容器添加宽高 let table = document.getelementsbyclassname('w-table')[0] let virtual = document.getelementsbyclassname('virtual') for (let item of virtual) { item.style.height = table.clientheight - 1 + 'px' item.style.width = item.parentelement.parentelement.clientwidth + 'px' }},// 鼠标放开结束拖动handlemouseup (e, column) { this.dragstate.end = parseint(column.columnkey) // 记录起始列 this.dragcolumn(this.dragstate) // 初始化拖动状态 this.dragstate = { start: -1, end: -1, move: -1, dragging: false, direction: undefined }},// 拖动中handlemousemove (e, column) { if (this.dragstate.dragging) { let index = parseint(column.columnkey) // 记录起始列 if (index - this.dragstate.start !== 0) {  this.dragstate.direction = index - this.dragstate.start < 0 ? 'left' : 'right' // 判断拖动方向 this.dragstate.move = parseint(column.columnkey) } else { this.dragstate.direction = undefined } } else { return false }},// 拖动易位dragcolumn ({start, end, direction}) { let tempdata = [] let left = direction === 'left' let min = left ? end : start - 1 let max = left ? start + 1 : end for (let i = 0; i < this.tableheader.length; i++) { if (i === end) { tempdata.push(this.tableheader[start]) } else if (i > min && i < max) { tempdata.push(this.tableheader[ left ? i - 1 : i + 1 ]) } else { tempdata.push(this.tableheader[i]) } } this.tableheader = tempdata},
五、虚线效果
在拖动过程中，通过 mousemove 事件，改变当前列的表头状态
然后借助 headercellclassname 动态修改其 class
headercellclassname ({column, columnindex}) { return (columnindex - 1 === this.dragstate.move ? `darg_active_${this.dragstate.direction}` : '')}
这个 class 会添加到表头单元格 <th> 上，通过这个 class 给上面的空标签 <span class="virtual"> 添加虚线即可贴一下我自己写的完整样式（使用了 sass 作为编译工具）：
<style lang="scss">.w-table { .el-table th { padding: 0; .virtual{  position: fixed;  display: block;  width: 0;  height: 0;  margin-left: -10px;  z-index: 99;  background: none;  border: none; } &.darg_active_left {  .virtual {  border-left: 2px dotted #666;  } } &.darg_active_right {  .virtual {  border-right: 2px dotted #666;  } } } .thead-cell { padding: 0; display: inline-flex; flex-direction: column; align-items: left; cursor: pointer; overflow: initial; &:before {  content: ;  position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0; } } &.w-table_moving { .el-table th .thead-cell{  cursor: move !important; } .el-table__fixed {  cursor: not-allowed; } }}
六、父组件调用
<template><p> <wtable :data="tabledata" :header="tableheader" :option="tableoption"> <el-table-column slot="fixed" fixed prop="date" label="日期" width="150"> </el-table-column> </wtable></p></template><script>import wtable from '@/components/w-table.vue'export default { name: 'table', data () { return {  tableoption: {  border: true,  maxheight: 500  },  tableheader: [{  prop: 'name',  label: '姓名',  sortable: true,  sortmethod: this.handlenamesort  }, {  prop: 'province',  label: '省份',  minwidth: '120'  }, {  prop: 'city',  label: '市区',  minwidth: '120'  }, {  prop: 'address',  label: '地区',  minwidth: '150'  }, {  prop: 'zip',  label: '邮编',  minwidth: '120'  }],  tabledata: [{  date: '2016-05-03',  name: '王小虎',  province: '上海',  city: '普陀区',  address: '上海市普陀区金沙江路 1518 弄',  zip: 200333  }, {  date: '2016-05-02',  name: '王小虎',  province: '上海',  city: '普陀区',  address: '上海市普陀区金沙江路 1518 弄',  zip: 200333  }, {  date: '2016-05-04',  name: '王小虎',  province: '上海',  city: '普陀区',  address: '上海市普陀区金沙江路 1518 弄',  zip: 200333  }, {  date: '2016-05-01',  name: '王小虎',  province: '上海',  city: '普陀区',  address: '上海市普陀区金沙江路 1518 弄',  zip: 200333  }, {  date: '2016-05-08',  name: '王小虎',  province: '上海',  city: '普陀区',  address: '上海市普陀区金沙江路 1518 弄',  zip: 200333  }, {  date: '2016-05-06',  name: '王小虎',  province: '上海',  city: '普陀区',  address: '上海市普陀区金沙江路 1518 弄',  zip: 200333  }] } }, methods: { handlenamesort () {  console.log('handlenamesort') } }, components: { wtable }}</script>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
progressbar组件实战案例解析
如何优化vue项目
以上就是使用element-ui table实现拖拽功能的详细内容。