README
vue drag tree table
IE10+/Chrome/firefox
2.0.8
及以上版本
请更新到基于vue实现的可以拖拽排序的树形表格
支持拖拽排序、固定头、拖拽改变行宽,checkbox多选、自定义单元格内容、设置行的背景色、动态控制某些行是否可以拖拽等等....
安装
npm
npm i drag-tree-table-yk --save-dev
script
<script src="./dist/dtree-table.js"></script>
使用方式
我用的是iconfont阿里的图标库里面有些字体你的电脑没有可能 直接link引入//at.alicdn.com/t/font_1472101_svwr4uiuqh.css
<template>
<div id="app">
<dragTreeTable
:data="treeData"
:onDrag="onTreeDataChange"
fixed
border>
</dragTreeTable>
</div>
</template>
<script>
import dragTreeTable from "drag-tree-table";
export default {
name: "app",
data() {
return {
treeData: {
columns: [...],
lists: [...]
}
};
},
components: {
dragTreeTable
},
mounted() {
var columns = [
{
type: "icon",
// title: "<a>菜单名称</a>",
field: "name",
width: 250,
// align: "left",
// titleAlign: "left",
formatter: item => {
return "<span>" + item.name + "</span>";
},
totalNum:'id', //新增了两个节点这个id可以随意放置你的参数名然后纯展示动态数据用
isDragOpen:'isOpen', //新增isOpen需要你在data中中加一个属性,然后只通过这个节点来控制拖动,另外我用的是iconfont阿里的图标库里面有些字体你的电脑没有可能 直接link引入//at.alicdn.com/t/font_1472101_svwr4uiuqh.css
actions1:[{
text: "编辑",
onclick: this.onTreeDataChange,
formatter: item => {
return "<span>编辑</span>";
}
// onclick: this.onDetail,
},{
text: "排序",
onclick: this.onTreeDataChange,
formatter: item => {
return "<span>排序</span>";
}
// onclick: this.onDetail,
},{
text: "删除",
onclick: this.onTreeDataChange,
formatter: item => {
return "<span>删除</span>";
}
// onclick: this.onDetail,
}]
},
]
},
methods: {
onTreeDataChange(list) {
this.treeData.lists = list;
}
},
};
</script>
更多组件详细功能请参考 API文档