表格是经常在项目中使用到的,所以,今天给大家介绍一个可以拖拽的表格,比平常的表格功能更强大一点。
首先,先下载:
npm i drag-tree-table --save-dev
使用方式
import dragTreeTable from 'drag-tree-table'
在组件中注册
在页面中展示:
现在有一个需求,实现父目录有编辑和删除,子节点只有删除操作,如下图所示:
具体实现如下:
colums都知道是定义表格的字段,readonly是表示只读,不是只读时,表格才会push进去一个操作,里面有个formatter属性是对某列字段的操作,有子节点或者是只读时,父目录可以编辑和删除,只读或sfbx字段子节点可以删除操作。(本文所提到的字段都是自己定义的,大家可以根据实际需要来写。)