drag-tree-table-yk

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文档

更新日志-CHANGELOG

我的微信a5628354，欢迎沟通（找我加新需求的记得先来个star支持下哦）