Element-UI 的Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一、数据驱动 传统的拖动效果,都是基于通过mousedown、mousemove、mouseup事件来修改删减 dom 节点 但Vue 是一个数据驱动的前端框架,开发时应尽量避免操作 dom 而且Element-UI 的 Table 组件封装得很严谨,直接操作 dom 很容易产生不...
1、引入依赖 sortablejs npm install sortable.js --save 1. 2、在mounted() 函数中分别引入两个自定义的方法 , 分别是行和列的拖动 贴一下这两个方法,拖动行方法 dragSort() { let that = this; // 首先获取需要拖拽的dom节点 const el1 = document.querySelectorAll('.el-table__body-wrapper')[0]...
methods: {//行拖拽rowDrop() {consttbody = document.querySelector('.el-table__body-wrapper tbody')const_this =thisSortable.create(tbody, { onEnd({ newIndex, oldIndex }) { console.log("拖动了行","当前序号:"+newIndex)constcurrRow = _this.tableData.splice(oldIndex,1)[0] _this.tableDa...
console.log(`开始移动的位置 ${this.dragState.startIndex}`)//给当前要拖动列的th设置classdocument.querySelectorAll('.drag_table table thead tr th')[this.dragState.startIndex].className +=''+'dragging_column';//给拖动时的虚拟容器添加宽高let table = document.getElementsByClassName('drag_table'...
tableHeader = tempData // tableHeader变了后内容没有相应发生变化,可能是elementUI的bug,须有这行代码来强制触发内容重渲染 this.tableData.splice(0, 0) this.handleCaretLocation() } } 表头拖动时的指示效果,通过 mousemove 事件改变数据,然后通过 headerCellClassName 动态修改表头列的class,以下是css样式: ...
在开发中遇到一个需求,即实现table列的拖拽,但是调研发现,大部分是基于sorttable.js这个包实现的,但是通过实际应用,发现sorttable.js用在操作element table 组件中并不是很舒服,总会莫名其妙的冒出一些异常bug,于是自行封装一个table 列拖拽组件。 效果演示: 具体效果如下: 难点概括 ①element table header插槽应用 ...
{ // 表头数据 tableHeader: [ { label: "姓名", prop: "name", }, { label: "年龄", prop: "age", }, { label: "家乡", prop: "home", }, { label: "爱好", prop: "hobby", }, ], // 表体数据 tableBody: [ { id: "1", name: "孙悟空", age: 500, home: "花果山", ...
实现el-table树结构表格展开折叠且合并单元格功能(两种思路) 水冗水孚阅读483 基于CSS Grid 的简易拖拉拽 Vue3 组件,从代码到NPM发布(2)- NPM发布、在线示例 xachary阅读461 基于CSS Grid 的简易拖拉拽 Vue3 组件,从代码到NPM发布(3)- 小结 xachary阅读444 ...
// 解决有合计行时,横向滚动条在左侧、右侧固定列中无法选中问题.el-table__fixed,.el-table__fixed-right{pointer-events:none;>*{pointer-events:all;}} 问题代码,感兴趣的可以自己试下 <!-- element ui 样式demo --><template><divclass="main-content"><divclass="my-title">固定列</div><divclass...
如果是后端存一份也是一个道理,只要在表格拖动事件的回调函数中把对应列的宽度更改即可,然后告知后端(比如通过接口)当然表头数据也要通过后端获取,就不是前端代码中写死的了 好记性不如烂笔头,记录一下把^_^ element-ui 阅读4.5k更新于2022-01-09 水冗水孚 ...