elementui表格列左右移动

Posted 2023-04-11

ElementUI表格列可以通过拖拽的方式左右移动，具体实现方法如下：

在<el-table>标签中添加 @header-dragend 事件监听器，用于监听表头拖拽结束事件。

html
Copy code
<el-table :data="tableData" @header-dragend="handleHeaderDragend">
<!-- 表格列定义 -->
</el-table>

在 Vue 组件中定义 handleHeaderDragend 方法，该方法会在表头拖拽结束后被调用。

javascript
Copy code
methods:
handleHeaderDragend(newWidths)
// newWidths 是一个数组，包含了所有表格列的最新宽度
// 在这里可以根据需求对 newWidths 进行处理



在handleHeaderDragend方法中，可以根据拖拽结束后每列的宽度，重新设置表格列的顺序。

javascript
Copy code
methods:
handleHeaderDragend(newWidths)
// 获取当前表格的所有列定义
const columns = this.$refs.table.columns;
// 将 newWidths 转换为一个对象，键为列的索引，值为列的宽度
const widths = Object.fromEntries(newWidths.map((w, i) => [i, w]));
// 对列定义进行排序，根据每列的最新宽度从小到大排序
const sortedColumns = [...columns].sort((a, b) => widths[a.realIndex] - widths[b.realIndex]);
// 更新表格的列定义，实现左右移动
this.$refs.table.columns = sortedColumns;



以上就是 ElementUI 表格列左右移动的实现方法。 参考技术A elementui表格列左右移动的方法如下:
1、打开需要操作的EXCEL表格，选中需要移动的单元格。

2、鼠标停在单元格边框上，使之变成带箭头方向的“+”符号，点击鼠标左键不放上下移动鼠标，可看到出现一个虚线边框，松开鼠标即可将单元格移动到虚线框所在位置。

3、返回EXCEL表格，可发现已成功在EXCEL表格中实现上下移动单元格操作。 参考技术B Element UI表格列左右移动是指在表格列中，使用拖动操作来调整列的位置。这样可以使表格更加美观，与用户的使用习惯更加匹配。Element UI通过使用javascript语言中的drag and drop插件，实现了表格列的左右移动操作。只需要在表格的列头使用draggable属性，就可以使表格列支持左右拖动操作，从而实现调整列位置的功能。用户可以在任何时候，自由的调整表格的列位置，从而让表格更加美观，更加完美的符合用户的使用习惯。 参考技术C elementUI表格列左右移动的实现有两种方式：
第一种方式：
在 element-ui 中，提供了一个可以用来实现表格列左右移动的内置指令 v-move。可以通过在列的配置中，添加 v-move 指令，实现表格列的左右移动。具体实现方法详见：https://element.eleme.io/#/zh-CN/component/table#tong-bu-zhi-ling-v-move
第二种方式：
在 element-ui 中，提供了一个可以用来实现表格列左右移动的内置组件 table-column。可以通过在列的配置中，添加 table-column 组件，实现表格列的左右移动。具体实现方法详见：https://element.eleme.io/#/zh-CN/component/table#tian-jia-lie-biao-zuo-you-dong-hua 参考技术D 可以通过设置表格的draggable属性来实现表格列的左移右移的功能，具体实现步骤如下：
1、 在element-ui中定义表格的参数时，在里面添加draggable属性，属性值可以设置为true，表示可以拖动表格列；
2、 定义表格的列头，添加draggable属性来控制列头的拖动，属性值可以设置为 true，表示可以拖动列头；
3、在表格的mounted函数中，添加draggable的方法，让拖动的表格列能够实现移动，此时可以使用js操作dom来实现；
4、最后，在表格的drop函数中，设置表格列的位置，当表格列被拖动到新的位置后，可以将表格列的位置设置到新的位置，从而实现表格列的左移右移。

ElementUI表格合计项固定列 滚动条不可滑动

//之前写elementUI表格 没太关注这个问题
//直到前段时间由于固定合计列太宽 而合计列滚动条无法拖动
//所以在网上查了很多相关知识 在此做下记录
//本项目测试可用

原因：是因为el-table在列添加fixed时，实际上是在这个table上方添加一个类名为el-table__fixed的相对定位的div，
  　　她会根据下方拖动的表格实时进行重绘，因为盖住了所以无法拖动。

解决方法：
/*滚动条覆盖*/
.el-table--scrollable-x .el-table__body-wrapper {
　　z-index: 2;
}  

　　

 参考链接：https://segmentfault.com/q/1010000016572074?utm_source=tag-newest