做网站的公司,陕西省住建厅网站官网,重庆有名的网站建设,1688黄页网品种大全20241.el-table自带的列宽拖拽
如图#xff1a;下方为el-table的属性之一#xff0c;在下面代码所示的位置加上boder即可#xff0c;把鼠标放在每个列之间#xff0c;会出现拖拽的鼠标样式#xff0c;可以调整列的宽度#xff08;但是仅限调整列宽#xff09;
border是否带…1.el-table自带的列宽拖拽
如图下方为el-table的属性之一在下面代码所示的位置加上boder即可把鼠标放在每个列之间会出现拖拽的鼠标样式可以调整列的宽度但是仅限调整列宽
border是否带有纵向边框boolean—false !-- 表格 --el-tableheight100%width100%borderresizablev-loadingloading:datatableDataselection-changetableSelect
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(divWidthresizeWidth) { //最小宽度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 下包及引入
也可以用pnpmyarn下载依赖下载慢可切换源
npm install sortablejs --save导入到您的项目中import Sortable from sortablejs;创建新实例
Sortable.createHTMLElementObjectSortable 3.3CDN !-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) --
script srchttps://cdn.jsdelivr.net/npm/sortablejslatest/Sortable.min.js/script 3.4代码举例
3.4.1 使用el-table组件
templatediv classtableboxel-table :datatableData row-keyid border highlight-current-rowel-table-column propname label你的大名/el-table-columnel-table-column propaddress label地理位置/el-table-columnel-table-column propdate label那年时候/el-table-column/el-table/div
/template
3.4.2 自定义的数据
为了演示造的数据正常应该是调用接口获取数据的
scriptimport 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 langscss
.tablebox{padding: 40px;border-radius:10px ;
background-color: #f1f1ee;
}/style3.6 具体官方文档请点击下方进行跳转
https://www.npmjs.com/package/sortablejs#cdnhttps://www.npmjs.com/package/sortablejs#cdn
