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
}
--------------