Drag-drop-tree-table NPM

drag-drop-tree-table

拖拽树形结构的表格，支持自定义内容格式。

适用场景

适用于需要拖拽表格，例如菜单的场景

npm.io

文档

参数配置

data: 表格数据

onDrag:拖拽动作完成后触发

isdraggable：是否开启拖拽

fixed:固定表头

height: 设置表格高度

border: 显示边框

resize: 支持表格宽度调整

onlySameLevelCanDrag: 禁止拖拽改变层级

<dragTable :data="treeData" :columns="columns" :onDrag="onTreeDataChange">
			<template #action="{row}">
				<i class="el-icon-edit" @click="edito(row)"></i>&nbsp;&nbsp;&nbsp;
				<el-popconfirm
				  title="这是一段内容确定删除吗？"
					@confirm="deleteRow(row)"
				>
				  <el-button slot="reference">删除</el-button>
				</el-popconfirm>
			</template>
			<template #customize="{row}">
				<template v-if="row.column.field==='enable'">
					<el-switch
					  v-model="row.value.enable"
					  active-color="#13ce66"
					  @change="changeEnable"
					  inactive-color="#ff4949">
					</el-switch>
				</template>
				<template v-if="row.column.field==='isPublic'">
					<el-switch
					  v-model="row.value.isPublic"
					  active-color="#00aaff"
					  inactive-color="#b5b5b5">
					</el-switch>
				</template>
			</template>
</dragTable>

data 格式

参数	参数类型	描述
id	String	唯一标识
parent_id	String	父节点ID
order	Number	排序，0开始，执行onDrag后order会重置
name	String	默认显示内容
open	Boolean(非必须)	true展开，false 收起（默认）
children	Array	子节点
isShowCheckBox	Boolean	控制checkBox列是否显示 checkbox
backgroundColor	web color	行的背景颜色

data数据事例

[
  {
    "id":1,
    "parent_id":0,
    "order":0,
    "name":"服务管理",
    "uri":"/acmp/service",
    "open":true,
    "children":[]
   },
    {
    "id":2,
    "parent_id":0,
    "order":1,
    "name":"系统管理",
    "uri":"/acmp/sys",
    "open":true,
    "isShowCheckbox": false, '如果设置了type=checkbox,但是想控制某些行不显示CheckBox，可以用此属性'
    "children":[
      {
        "id":21,
        "parent_id":2,
        "open":true,
        "order":0,
        "name":"菜单管理",
        "uri":"/acmp/sys/menu",
        "children":[]
      }
    ]
  },
  {
    "id":3,
    "parent_id":0,
    "order":2,
    "name":"文档管理",
    "uri":"/acmp/minio",
    "open":true,
    "children":[]
  }
]

columns: 表头配置参数

表头格式：

参数	必填项	默认值	可选值	描述
type	否	null	'selection', 'actions', 'checkbox','customize'	checkbox: 选择框；actions:操作；selection:可折叠项；不填：普通文字;customize:自定义样式可以使用作用域插槽
title	是		String	表格标题
field	是		String	单元格内容取值使用
width	否		Number	单元格宽度
align	否	left	left,center,right	单元格对齐方式
flex	否		Number	自动填充空余区域
formatter	否		Function	自定义单元格显示内容，参数为当前行数据

columns数据事例

[
    {
        type: 'checkbox',
        isContainChildren: false, //勾选父节点的时候，是否勾选子节点 默认为false
        onChange:(row)=>{
            // console.log(row)
        },
        width:50
    },
    {
        type: 'selection',
        title: '菜单名称',
        field: 'menuName',
        align: 'left',
        titleAlign:'left',
        width: 200,
        formatter: (item) => {
            return item.name
        }
    },
    {
        title: 'URL地址',
        field: 'url',
        align:'center',
        width: 200,
        // flex:1,
        formatter: (item) => {

            return item.url
        }
    },
    {
        title:'启用',
        field:'enable',
        align:'center',
        formatter:(item)=>{
            return item.enable?'是':'否'
        }
    },
    {
        title:'公开',
        field:'isPublic',
        align:'center',
        formatter:(item)=>{
            return item.isPublic?'是':'否'
        }
    },
    {
        title: '操作',
        type: 'action',
        width: 350,
        align: 'center',
        // flex:1,
        actions: [
            {
                text: '编辑',
                onclick: (item) => {
                    // item是当前行的数据
                    console.log(item)
                },
                formatter: (item) => {
                    return '<svg></svg>'
                }
            },
            {
                text: '删除',
                onclick: (item) => {
                    // item是当前行的数据
                    console.log(item)
                },
                formatter: () => {
                    return '<i >删除</i>'
                }
            }
        ]
    },
],