如果您想要实现
Element Table树形表格的拖动功能，可以考虑使用
Vue.js框架并结合
element-ui组件库，再使用一些自定义指令和事件来实现。
以下是一种实现方式：
1. 在Vue组件中引入
element-ui组件库，并在模板中使用
el-
table组件，设置其
tree-props属性为{children: 'children', hasChildren: 'hasChildren'}，以支持
树形结构。
2. 使用自定义指令v-draggable，在表格
行上绑定该指令，使得
行可以被拖动。
3. 监听
el-
table组件的row-drop事件，在该事件中更新
数据源，以实现拖拽
行的排序。
下面是示例代码：
```html
<template>
<
el-
table
:data="
tableData"
:
tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@row-drop="handleRowDrop"
>
<
el-
table-column prop="name" lab
el="名称"></
el-
table-column>
<
el-
table-column prop="age" lab
el="年龄"></
el-
table-column>
<
el-
table-column prop="address" lab
el="地址"></
el-
table-column>
<
el-
table-column lab
el="操作">
<template slot-scope="scope">
<button v-if="scope.row.hasChildren" @click="toggleNode(scope.row)">
{{ scope.row.expanded ? '收起' : '
展开' }}
</button>
</template>
</
el-
table-column>
<
el-
table-column lab
el="拖动" width="80">
<template slot-scope="scope">
<div v-draggable class="drag-handle">
<i class="
el-icon-s-grid"></i>
</div>
</template>
</
el-
table-column>
</
el-
table>
</template>
<script>
import { directive } from 'vuedraggable'
export default {
directives: {
draggable: directive
},
data() {
return {
tableData: [
{
name: '张三',
age: 18,
address: '北京市朝阳区',
children: [
{
name: '李四',
age: 22,
address: '北京市海淀区',
children: [],
hasChildren: false
}
],
hasChildren: true
},
{
name: '王五',
age: 30,
address: '上海市浦东区',
children: [],
hasChildren: false
}
]
}
},
methods: {
toggleNode(node) {
this.$refs.
table.toggleRowExpansion(node)
},
handleRowDrop(event) {
const {
treeData, newIndex, oldIndex } = event
// 更新
数据源
treeData.splice(newIndex, 0,
treeData.splice(oldIndex, 1)[0])
}
}
}
</script>
<style>
.drag-handle {
cursor: move;
display: inline-block;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
}
</style>
```
在上面的代码中，我们首先引入了vuedraggable库中的directive指令，并将其作为自定义指令draggable注册到Vue实例中。
在模板中，我们将
el-
table组件的
tree-props属性设置为指定的
树形结构字段，以支持
树形表格的展示。然后在拖动列中使用v-draggable指令，使得
行可以被拖拽。
最后，我们监听了
el-
table组件的row-drop事件，在事件中更新
数据源，以实现
行的拖拽排序。
4422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
