如果您想要实现
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事件，在事件
中更新
数据源，以实现行的拖拽排序。
本文介绍如何在Element UI的表格组件中插入图标。通过在表格数据的特定单元格内添加class，结合Element UI的图标库，实现图标在表格中的展示。详细步骤包括设置图标class和配置表格数据。
最低0.47元/天 解锁文章
3124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
