Element-UI Table组件上添加列拖拽效果实现方法


Posted in Javascript onApril 14, 2018

Element-UI 的 Table 组件很强大,但是我们的需求更强大...

简单粗暴的来一发效果图:

Element-UI Table组件上添加列拖拽效果实现方法

一、数据驱动

传统的拖动效果,都是基于通过 mousedown、mousemove、mouseup 事件来修改删减 dom 节点

但 Vue 是一个数据驱动的前端框架,开发时应尽量避免操作 dom

而且 Element-UI 的 Table 组件封装得很严谨,直接操作 dom 很容易产生不可预计的 bug

所以我的核心思路就是:通过一个数组渲染表头(列),然后修改这个数组的顺序,从而修改列表的列排序

template 部分:

<div 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>
 </div>

上面的 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(
  'div', {
   '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>
<div>
 <wTable :data="tableData" :header="tableHeader" :option="tableOption">
 <el-table-column slot="fixed"
  fixed
  prop="date"
  label="日期"
  width="150">
 </el-table-column>
 </wTable>
</div>
</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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
React中的render何时执行过程
Apr 13 #Javascript
全站最详细的Vuex教程
Apr 13 #Javascript
vue的常用组件操作方法应用分析
Apr 13 #Javascript
简单的vuex 的使用案例笔记
Apr 13 #Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 #Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 #Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 #Javascript
You might like
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
php 使用array函数实现分页
2015/02/13 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
jQuery each()小议
2010/03/18 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
利用python3随机生成中文字符的实现方法
2017/11/24 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
Python安装selenium包详细过程
2019/07/23 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Python如何重新加载模块
2020/07/29 Python
Python self用法详解
2020/11/28 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
联想台湾官网:Lenovo TW
2018/05/09 全球购物
停车场管理制度范本
2015/08/05 职场文书
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript