丝滑般 Vue 拖拽排序树形表格组件Vue-DragTreeTable

今天给小伙伴们分享一款纵享丝滑般体验的Vue拖拽树形表格DragTreeTable。

vue-drag-tree-table 基于vue.js实现可拖拽排序的树形表格组件。支持拖拽排序、固定表头、拖拽改变行宽、checkbox多选、自定义单元格内容、动态控制某些行是否拖拽等功能。

安装

$ npm i drag-tree-table -S

使用组件

<template>
  <div id="app">
    <dragTreeTable
      :data="treeData"
      :onDrag="onTreeDataChange"
      :isdraggable="true"
      fixed
      border
      resize
    >
    </dragTreeTable>
  </div>
</template>

<script>
import dragTreeTable from "drag-tree-table"

export default {
  data() {
    return {
      treeData: {
        columns: [...],
        lists: [...]
      }
    };
  },
  components: {
    dragTreeTable
  },
  methods: {
    onTreeDataChange(list) {
      this.treeData.lists = list;
    }
  },
};
</script>

data参数接受一个对象，包含如下字段

• columns:[] // 表头配置参数
• lists: [] // 表格数据
• custom_field: {} // 自定义字段的配置（非必需）

columns表头

[
  {
    type: 'selection',
    title: '菜单名称',
    field: 'name',
    width: 200,
    align: 'center',
    formatter: (item) => {
      return '<a>'+item.name+'</a>'
    }
  },
  {
    type: 'checkbox',
	title: '链接',
	field: 'url',
	width: 200,
	align: 'center'
    isContainChildren: true, //是否勾选子节点，默认false
  },
  {
    type: 'action',
	title: '操作',
    width: 350,
    align: 'right',
    actions: [
      {
        text: '查看角色', onclick: (item) => { console.log(item) },
        formatter: (item) => {
          return '<i>查看角色</i>'
        }
      },
      {
        text: '编辑', onclick: (item) => { console.log(item) },
        formatter: (item) => {
          return '<i>编辑</i>'
        }
      }
    ]
  },
  // ...
]

lists数据体

[
  {
    "id":40,
    "parent_id":0,
    "order":0,
    "name":"动物类",
    "uri":"/masd/ds",
    "open":true,
    "lists":[]
  },{
    "id":5,
    "parent_id":0,
    "order":1,
    "name":"昆虫类",
    "uri":"/masd/ds",
    "open":true,
    "isShowCheckbox": false,
    "lists":[
      {
        "id":12,
        "parent_id":5,
        "open":true,
        "order":0,
        "name":"蚂蚁",
        "uri":"/masd/ds",
        "lists":[]
      }
    ]
  },
  // ...
]

组件全局方法

提供了各种丰富的DEMO及API使用。

# 文档地址
https://www.mofazhuan.com/31.html

# 仓库地址
https://github.com/mafengwo/vue-drag-tree-table

OK，就介绍到这里。如果大家有其它Vue树形表格组件，欢迎一起交流讨论哈~~