当你需要在ECharts的`el-table`组件中集成SortableJS实现树形结构的拖拽排序时，你需要确保数据结构支持层次关系，并对SortableJS做一些定制化设置。以下是一个简单的示例，假设你的数据结构是一个数组嵌套的对象，每个对象都有一个`parentKey`属性表示其父级
节点：
```javascript
import { ElTable, TableColumn } from 'element-plus';
import Sortable from 'sortablejs';
// 假设你有如下的树形结构数据
const treeData = [
{
id: 1,
name: '一级
节点A',
children: [
{ id: 2, name: '二级
节点A1', parentKey: 1 },
{ id: 3, name: '二级
节点A2', parentKey: 1 },
],
},
// 其他
节点...
];
function getChildren(node) {
return node.children || [];
}
// 初始化SortableJS实例并限制排序范围
Sortable.create(treeData, {
group: '__tree__',
onEnd: (evt) => {
const sortedData = [...treeData];
sortedData.sort((a, b) => a.id - b.id); // 按id进行简单排序，你可以根据实际需求调整排序规则
// 验证是否在
同一层级，如果不是则恢复原样
for (let i = 0; i < sortedData.length; i++) {
const childNodes = getChildren(sortedData[i]);
if (
childNodes.some((child) =>
sortedData.indexOf(child) !== i + childNodes.findIndex(
(grandChild) => grandChild.parentKey === sortedData[i].id
)
)
) {
console.log('尝试跨层级拖拽，操作已撤销');
return;
}
}
// 更新原始数据
treeData.splice(0, treeData.length, ...sortedData);
},
});
// el-table配置
<template>
<div>
<ElTable
:data="treeData"
border
style="width: 100%"
:columns="[
{ prop: 'name', label: 'Name', width: 200 },
// 如果需要显示其他列，添加相应列配置...
]"
>
<!-- 为了拖拽排序，我们只在name列添加SortableJS的列插件 -->
<template #default="{ row }">
{{ row.name }}
<SortableElement
v-if="row.children && row.children.length">
<ul>
<li v-for="(item, index) in row.children" :key="item.id">{{ item.name }}</li>
</ul>
</SortableElement>
</template>
</ElTable>
</div>
</template>
<script>
export default {
data() {
return {
treeData,
};
},
};
</script>
<style scoped>
SortableElement {
display: flex;
flex-direction: column;
}
</style>
```
扫一扫
786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
