element-table(树形结构),实现同级拖动排序
element-table 是 Element UI 中的一个表格组件，可以方便地实现表格的展示和操作。对于树形结构的表格，你可以使用 el-table-column 的 type='selection' 和 type='expand' 来实现节点的选择和展开/收起。
然而，对于节点的拖拽排序，Element UI 本身并不直接支持。你需要借助第三方库，比如 vuedraggable，来实现这个功能。
以下是一个基本的实现示例：
1.首先，你需要安装 vuedraggable：
bash复制代码
javascript经典代码大全
npm install vuedraggable
2.在你的组件中引入 vuedraggable：
javascript复制代码
import draggable from 'vuedraggable';
3.在你的 components 对象中注册 draggable：
javascript复制代码
components: {
draggable
}
4.在你的模板中使用 draggable 组件包裹你的 el-table-column：
html复制代码
<draggable v-model="list" :options="{group:'people'}">
<el-table :data="list" style="width: 100%">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="age" label="Age" width="180"></el-table-column>
</el-table>
</draggable>
在这个例子中，v-model="list" 绑定了你的数据源，options 对象定义了拖拽的配置。其中 group: 'people' 指定了只有属于同一个组（这里为 'people'）的元素才能进行拖拽操作。
5. 最后，确保你的数据源 (list) 是一个数组，包含了你要展示的表格数据。例如：
javascript复制代码
data() {
return {
list: [
{ name: 'John', age: 20 },
{ name: 'Jane', age: 22 },
{ name: 'Doe', age: 21 }
]
};
}
这样，你就可以在同一个级别的节点之间进行拖拽排序了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。