el-table树形列表拖拽排序(sortablejs)
使用Eelement UI的el-table
组件结合SorTable.js实现树形列表的拖拽排序功能,你需要做以下几步:
- 引入SorTable.js库。
- 初始化
el-table
的树形结构。 - 使用SorTable.js提供的API实现拖拽排序功能。
以下是一个简单的示例代码:
<template>
<el-table
:data="tableData"
row-key="id"
border
default-expand-all
:tree-props="{children: 'children'}"
>
<el-table-column
prop="date"
label="日期"
sortable
width="180">
</el-table-column>
<!-- 其他列 -->
</el-table>
</template>
<script>
import Sortable from 'sortablejs';
export default {
data() {
return {
tableData: [
{
id: 1,
date: '2016-05-02',
children: [
{
id: 2,
date: '2016-05-02'
},
// 更多子项...
]
},
// 更多项...
]
};
},
mounted() {
this.rowDrop();
this.columnDrop();
},
methods: {
rowDrop() {
const tbody = document.querySelector('.el-table__body-wrapper tbody');
const _this = this;
Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
const currRow = _this.tableData.splice(oldIndex, 1)[0];
_this.tableData.splice(newIndex, 0, currRow);
}
});
},
columnDrop() {
// 如果需要列的拖拽排序,可以在这里实现
// 参考 https://github.com/SortableJS/Sortable#configuration
}
}
};
</script>
确保你已经安装了sortablejs
依赖:
npm install sortablejs
这个示例提供了行的拖拽排序功能。如果你还需要实现列的拖拽排序,可以参考Sortable.js的文档实现相关逻辑。
评论已关闭