el-table拖拽功能实现（3种详细解释）

作者：2023面试高手 | 2024-02-19 08:39:26

踩

el-table拖拽

1.el-table自带的列宽拖拽

如图：下方为el-table的属性之一，在下面代码所示的位置加上boder即可，把鼠标放在每个列之间，会出现拖拽的鼠标样式，可以调整列的宽度（但是仅限调整列宽）

border

是否带有纵向边框

boolean

—

false


  <!-- 表格 -->
    <el-table
      height="100%"
      width="100%"
      border
      resizable
      v-loading="loading"
      :data="tableData"
      @selection-change="tableSelect"
    >

2.实现左右table宽度拖拽

在使用组件的时候，尽量不要修改他，而是通过控制外面的盒子进行控制

2.1 html主要分为3部分（如图）：

2.2 css样式：（样式自行设置）


 
    ul,li{
      list-style: none;
      display: block;
      margin:0;
      padding:0;
    }
    .lrbox{
      width:100%;
      height: 48%;
      margin: 1% 0px;
      overflow:hidden;
      display: flex;
    }
    .left{
      width:calc(50% - 20px); 
 //注意  calc() 来动态设置宽高，在表达式中运算符的前后必须要有空格
      height:100%;
    }
    .resize {
        cursor: col-resize;
        background-color: #d6d6d6;
        border-radius: 5px;
        margin-top: -10px;
        width: 10px;
        background-size: cover;
        background-position: center;
        /*z-index: 99999;*/
        font-size: 32px;
        color: white;
    }
    .resize:hover {
        color: #4444
    }  
    .mid{
      width:50%;
      height:100%;
 
    }

2.3 下面是js代码：

多个地方使用可以进行封装混入，提高复用率，减少代码冗余


    dragControlWidth(divWidth，resizeWidth) {  //（最小宽度int，拖动条宽度int）
     //获取
          var resize = document.getElementsByClassName('resize');
          var left = document.getElementsByClassName('left');
          var right = document.getElementsByClassName('mid');
          var box = document.getElementsByClassName('lrbox');
    //对其进行循环，可用于多个左右控制
          for (let i = 0; i < resize.length; i++) {
         //鼠标按下事件
            resize[i].onmousedown = function (e) {
              var startX = e.clientX;    //指针相对于浏览器页面（或客户区）的水平坐标
              resize[i].left = resize[i].offsetLeft;   //返回当前元素相对于 offsetParent 节点左边界的偏移像素值
         //鼠标移动事件
              document.onmousemove = function (e) {
                var endX = e.clientX;
                var moveLen = resize[i].left + (endX - startX); 
                var maxT = box[i].clientWidth - resize[i].offsetWidth; 
        //设置极值范围
                if (moveLen < divWidth) {
                  moveLen = divWidth; 
                }
                if (moveLen > maxT - divWidth){
                  moveLen = maxT  - divWidth;
                }  
       
                resize[i].style.left = moveLen; 
       //用for循环是因为相较消耗小
                for (let j = 0; j < left.length; j++) {
                  left[j].style.width = moveLen + 'px';
                  right[j].style.width = (box[i].clientWidth - moveLen - resizeWidth) + 'px';
                }
              }
          //鼠标抬起事件
              document.onmouseup = function (e) {
          //结束处理（清除事件）
                document.onmousemove = null;
                document.onmouseup = null;
                resize[i].releaseCapture && resize[i].releaseCapture();
 
              }
              resize[i].setCapture && resize[i].setCapture(); 
              return false;
            }
          }
   
        },

上方提到了releaseCapture和setCapture ，下面进行简单的解释下呐，嘿嘿

2.4 releaseCapture和setCapture 介绍：

setCapture:

将鼠标事件锁定在指定的元素上，当元素捕获了鼠标事件后，该事件只能作用在当前元素上。(上面代码的事件是作用中间的拖动条，拖动条的样式可以自己通过css进行美化，搞出符合自己的想法或者符合需求即可)

使用：

currElement.setCapture(boolean)，用于设置是否捕获其子元素的鼠标事件

注意：

1.setCapture不可作用于键盘等其它事件，只作用于鼠标事件；

2.setCapture该法是IE浏览器专有；

3.并且只能捕作用在这几个事件上：

onmousedown、onmouseup、onmousemove、onclick、ondblclick、onmouseover和onmouseout

releaseCapture：

可以为指定的元素解除事件锁定，与上面的相反，一个锁定一个解锁。

（需要注意使用的是两者必须成对呈现，因为鼠标消息都发给上面锁定的这个窗口，直到调用ReleaseCapture或者调用SetCapture设置另一个窗口为止。）

另外，还有一个GetCapture，他是专门用来获取是哪个窗口捕获了鼠标事件

2.5 使用了releaseCapture和setCapture两次

还有重要的一点就是代码的后面使用了releaseCapture和setCapture两次

这行代码的目的是检查 resize[i] 元素是否支持 releaseCapture 方法，避免在不支持该方法的浏览器中引发错误。
如果 resize[i] 元素支持 releaseCapture 方法，则调用一次 releaseCapture() 来释放鼠标捕获。
使用两次的目的是处理特定情况下的浏览器兼容性问题。在某些浏览器中，需要多次调用 releaseCapture 才能完全释放鼠标捕获。通过使用两次调用，可以确保在各种浏览器环境下都能正确地释放鼠标捕获。

3.利用第3方插件自由拖拽

Sortable 是一个用于可重新排序的拖放列表的 JavaScript 库。

特征

支持触摸设备和现代浏览器（包括IE9）
可以从一个列表拖动到另一个列表或在同一列表中
移动项目时的 CSS 动画
支持拖动手柄和可选文本（比 voidberg 的 html5sortable 更好）
智能自动滚动
高级掉期检测
流畅的动画
多拖拽支持
支持 CSS 转换
使用原生 HTML5 拖放 API 构建

3.1效果图如下：

3.2使用 NPM 下包及引入：

也可以用pnpm，yarn下载依赖，下载慢可切换源


npm install sortablejs --save
 
导入到您的项目中：
 
import Sortable from 'sortablejs';
 
创建新实例
Sortable.create：HTMLElementObjectSortable

3.3CDN：


<!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

3.4代码举例：

3.4.1 使用el-table组件


<template>
	<div class="tablebox">
		<el-table :data="tableData" row-key="id" border highlight-current-row="">
			<el-table-column prop="name" label="你的大名"></el-table-column>
			<el-table-column prop="address" label="地理位置"></el-table-column>
			<el-table-column prop="date" label="那年时候"></el-table-column>
		</el-table>
	</div>
</template>

3.4.2 自定义的数据：

为了演示造的数据，正常应该是调用接口获取数据的


<script>
	import Sortable from 'sortablejs';
	export default {
		data() {
			return {
				tableData: [
					{
						id: '1',
						date: '2023-12-01',
						name: 'Juny Long',
						address: '地球村 亚洲 中国 湖南'
					},
					{
						id: '2',
						date: '2020-12-02',
						name: '琳琳1号',
						address: '地球村 亚洲 中国 贵州'
					},
					{
						id: '3',
						date: '2023-12-03',
						name: '零零七',
						address: '地球村 亚洲 中国 广东'
					},
					{
						id: '4',
						date: '2023-12-04',
						name: '龍',
						address: '地球村 亚洲 中国 香港'
					}
				],
				col: [
					{
						label: '那年时候',
						prop: 'date'
					},
					{
						label: '你的大名',
						prop: 'name'
					},
					{
						label: '地理位置',
						prop: 'address'
					}
				],
				dropCol: [
					{
						label: '那年时候',
						prop: 'date'
					},
					{
						label: '你的大名',
						prop: 'name'
					},
					{
						label: '地理位置',
						prop: 'address'
					}
				]
			}
		},

3.5 执行的方法（从而完成拖拽）：

具体解释看代码就行（别跟我说看不懂）


 
		mounted() {
            //dom加载完成触发
			this.rowDrop();  	// 行
			this.columnDrop();   // 列
		},
		methods: {
			// 行的拖拽
			rowDrop() {
				// 获取需要拖拽的DOM对象
				const tbody = document.querySelector('.el-table__body-wrapper tbody');
                //解决指向问题
				const that = this;
                //创建新实例
				Sortable.create(tbody, {
					// 结束拖拽
					onEnd({ newIndex, oldIndex }) {
                       //   删除当前行，放到拖拽后的位置
						const currentRow = that.tableData.splice(oldIndex, 1)[0];
						that.tableData.splice(newIndex, 0, currentRow);
					}
				})
			},
			// 列的拖拽
			columnDrop() {
			// 获取需要拖拽的DOM对象
				const wrapperTr = document.querySelector('.el-table__body-wrapper tr');
				const that = this;
				Sortable.create(wrapperTr, {
                    //动画
					animation: 180,
                    //延迟
					delay: 0,
					// 结束拖拽
					onEnd: e => {
            console.log(e,'e');
           // 输出新旧的坐标（就是xy行和列的位置，不明白可以看一下输出的哦）
            console.log(e.oldIndex,e.oldDraggableIndex);
            console.log(e.newIndex,e.newDraggableIndex)
 
						const oldItem = that.dropCol[e.oldIndex];
						that.dropCol.splice(e.oldIndex, 1);
						that.dropCol.splice(e.newIndex, 0, oldItem);
					}
				})
			}
		}
	}
</script>
<style scoped lang="scss">
.tablebox{
  padding: 40px;
  border-radius:10px ;
background-color: #f1f1ee;
}
 
</style>

3.6 具体官方文档请点击下方进行跳转：

https://www.npmjs.com/package/sortablejs#cdnhttps://www.npmjs.com/package/sortablejs#cdn

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/113720?site