在vxetable中使用Sortable库实现拖拽排序时报Sortable: `el` must be an HTMLElement, not [object Null]这个错误怎么解决
时间: 2024-03-12 16:44:00 浏览: 80
【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx
报错信息 `Sortable: el must be an HTMLElement, not [object Null]` 的意思是`el`必须是一个HTMLElement类型的对象,而不是一个null类型的对象。
这个错误的原因是,在`new Sortable`创建Sortable实例时,传入的`el`参数为null或undefined,导致无法创建Sortable实例。
解决方法是,需要确保传入的`el`参数是一个有效的HTMLElement类型的对象。可以先使用`document.getElementById`方法获取到表格的DOM元素,再将其传入到`new Sortable`方法中,如下所示:
```javascript
import Sortable from 'sortablejs';
export default {
data() {
return {
tableData: [
// ...
]
}
},
mounted() {
const el = document.getElementById('myTable').querySelector('tbody');
new Sortable(el, {
animation: 150,
onEnd: (evt) => {
// 处理拖拽排序后的数据
}
});
}
}
```
在这个示例中,我们使用`document.getElementById`方法获取到表格的DOM元素,然后使用`querySelector`方法获取到表格的tbody元素,最后将其传入到`new Sortable`方法中,即可避免这个错误。
阅读全文