vue-drag-tree-table Demo
下面是组件支持的所有特性相关的DEMO，并对每个DEMO做代码上的解释
显示边框 DEMO
组件增加border属性
<dragTreeTable
:data="treeData"
:onDrag="onTreeDataChange"
border>
</dragTreeTable>
删除行 DEMO | 源码查看
组件内部增加DelById方法，通过ID删除对应行，返回删除后的全量数据
<dragTreeTable
:data="treeData"
:onDrag="onTreeDataChange"
ref="table">
</dragTreeTable>
// columns
{
text: "删除",
onclick: this.onDel,
formatter: item => {
return "<i>删除</i>";
}
}
// methods
onDel(item) {
//本地删除数据，返回删除后的全量数据
const updatedLists = this.$refs.table.DelById(item.id)
this.treeData.lists = updatedLists;
}
固定表头 DEMO
组件增加fixed属性,默认高度是400
<dragTreeTable
:data="treeData"
:onDrag="onTreeDataChange"
fixed>
</dragTreeTable>
单元格宽度调整 DEMO
组件增加resize属性,默认自动展示边框，鼠标放置表头单元格右侧显示拖拽图标
<dragTreeTable
:data="treeData"
:onDrag="onTreeDataChange"
resize>
</dragTreeTable>
弹性布局 DEMO
columns设置flex即可,如下，最后一列设置flex:1,前面两列设置固定宽度，最后一列会弹性调整宽度，撑满剩余宽度
var columns = [
{
type: "selection",
title: "菜单名称",
field: "name",
width: 200,
align: "left"
},
{
title: "ID",
field: "id",
width: 100,
align: "center"
},
{
title: "链接",
field: "uri",
align: "center",
flex: 1
}
];
自定义单元格展示内容 DEMO
columns设置formatter,，formatter接受一个函数，返回Html字符串，不支持Vue组件嵌入 如果需要注册click事件，添加onclick参数
var columns = [
{
type: "selection",
title: "菜单名称",
field: "name",
width: 200,
align: "left",
titleAlign: "left"
},
{
title: "操作",
type: "action",
width: 150,
align: "center",
actions: [
{
text: "查看角色",
onclick: (row)=> {
alert(row.name)
},
formatter: item => {
return "<i>查看角色 </i>";
}
},
{
text: "编辑",
onclick: (row)=> {
alert(row.id)
},
formatter: item => {
return "<i>编辑</i>";
}
}
]
}
];
禁止拖拽 DEMO
如果不希望用户在拖拽，则可以增加组件参数:isdraggable="false"
<dragTreeTable
:data="treeData"
:onDrag="onTreeDataChange"
:isdraggable="false">
</dragTreeTable>
禁止拖拽改变层级，只允许调整顺序 DEMO
如果不希望用户在拖拽时改变层级结构，则可以增加组件参数onlySameLevelCanDrag
<dragTreeTable
:data="treeData"
:onDrag="onTreeDataChange"
onlySameLevelCanDrag>
</dragTreeTable>
checkbox多选框 DEMO
表格的某一列显示checkbox 设置column中type参数为checkbox即可 如果需要默认选中，数据中增加checked=true 如果想让某一行不显示checkbox，数据中增加isShowCheckbox=false
var columns = [
{
type: "checkbox",
width: 100,
align: "center",
isContainChildren: true
},
{
type: "selection",
title: "菜单名称",
field: "name",
width: 200,
align: "left",
titleAlign: "left",
formatter: item => {
return "<span>" + item.name + "</span>";
}
},
{
title: "链接",
field: "uri",
width: 200,
align: "center"
},
{
title: "父ID",
field: "parent_id",
width: 150,
align: "center"
},
];
自定义字段 DEMO
如果后端返回的数据跟vue-drag-tree-table组件的默认字段不一致，可以通过custom_field设置字段 举例。后端返回的数据，子节点字段是children,非lists,只需要如下设置
<dragTreeTable :data="treeData" :onDrag="onTreeDataChange"></dragTreeTable>
treeData: {
columns: [],
lists: [],
custom_field: {
lists: 'children'
}
}
同理，id、parent_id、order、都可以通过此方式设置
单元格对齐 DEMO
表头和表格内容可以分别控制单元格的对齐方式，表头对齐设置titleAlign,内容对齐设置align 总共3个值left、center、right columns设置如下
{
title: "ID",
field: "id",
width: 100,
align: "center",
titleAlign: "right"
}
拖拽行高亮提示 DEMO
组件增加hightRowChange参数即可，拖拽完成时，被拖拽的行会闪烁一下
<dragTreeTable
:data="treeData"
:onDrag="onTreeDataChange"
hightRowChange>
</dragTreeTable>
监听表格拖拽事件 DEMO
onDrag会返回四个参数，第一个是拖拽后新的数据，from是当前拖拽的行，to是目标行，where是拖拽的行为，top、bottom、center
<template>
<dragTreeTable
:data="treeData"
:onDrag="onTreeDataChange">
</dragTreeTable>
</template>
//methods
onTreeDataChange(lists, from, to, where) {
const pos = {
top: '上面',
bottom: '下面',
center: '里面'
}
alert(from.name + ' 拖拽到 ' + to.name + '的' + pos[where])
console.log(lists);
this.treeData.lists = lists;
}
}
监听checkbox勾选 DEMO
onDrag会返回四个参数，第一个是拖拽后新的数据，from是当前拖拽的行，to是目标行，where是拖拽的行为，top、bottom、center
// columns中type设置为checkbox，然后增加onChange，每次触发勾选后，onChange会返回一个数组，包含所有勾选的行
{
type: "checkbox",
width: 100,
align: "center",
onChange: (item)=>{
console.log(item)
alert('您选中了'+ item.length + '条数据');
}
},
全部折叠 DEMO
组件提供了两个用于全部折叠和打开的方法，ZipAll、OpenAll，使用方法如下
this.$refs.table.ZipAll();
动态控制是否可以拖拽 DEMO
如果用户动态控制某些行不允许拖拽，或者被拖拽进入，则可以增加组件参数beforeDragOver,可以动态控制哪些行可以拖拽，哪些行可以拖拽进入…
<dragTreeTable
:data="treeData"
:onDrag="onTreeDataChange"
:beforeDragOver="beforeDragOver">
</dragTreeTable>
// method
// from当前拖拽行，to拖拽目标行，where拖拽的方向(bottom,center,top)
beforeDragOver(from, to, where) {
if (from.name == '客户') return false
if (to.name == '联系人') return false
return true
}--------------