element ui 表格 手指拖动
时间: 2023-09-06 07:13:43 浏览: 81
element ui 表格可以通过手指拖动来实现重新排序的功能。步骤如下:
1. 首先,需要找到表格的 DOM 元素,也就是要拖拽元素的父容器。可以通过以下代码找到表格的 tbody 元素:
```javascript
const tbody = this.$refs.manufacturing.$el.querySelector(".el-table__body-wrapper > table > tbody");
```
这里的 `this.$refs.manufacturing` 是指引用的表格组件,通过 `$el` 属性获取到真实的 DOM 元素。
2. 接下来,需要使用 Sortable 库来创建可拖拽行的效果。可以使用以下代码:
```javascript
Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
const currRow = _this.form.manufacturing.splice(oldIndex, 1)[0];
_this.form.manufacturing.splice(newIndex, 0, currRow);
},
});
```
在 `onEnd` 回调函数中,可以通过 `newIndex` 和 `oldIndex` 获取到拖拽行的新位置和原位置。然后,可以使用数组的 `splice` 方法将当前行从原位置删除,并插入到新位置。
这样,通过以上步骤,就可以实现在 element ui 表格中使用手指拖动进行行的重新排序了。
请注意,以上代码示例中的 `this.$refs.manufacturing` 和 `_this.form.manufacturing` 是示例代码,具体的引用和数据需要根据实际情况进行修改。同时,还需要确保已经引入了 Sortable 库。
参考资料:
element ui 表格动态列显示空白bug 修复方法
template文件应用 row-key填写唯一标识 id="dragTable"是为了通过document找到该父容器 <span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue2+elementui表格实现拖拽行功能](https://blog.csdn.net/weixin_45441470/article/details/128701619)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [element ui 表格动态列显示空白bug 修复方法](https://download.csdn.net/download/weixin_38563176/12952759)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [【VUE】ElementUI实现表格拖拽功能及行大图预览](https://blog.csdn.net/weixin_47375144/article/details/131301371)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]