drag-drop-tree-table

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

适用场景

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

文档

参数配置

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>'
                }
            }
        ]
    },
],

约束

• 组件基于 vue2 适用于vue2 版本

• 可以获取源码组件 拷贝组件 在vue3版本中使用