基于Vue实现可以拖拽的树形表格实例详解

因业务需求，需要一个树形表格，并且支持拖拽排序，任意未知插入，github搜了下，真不到合适的，大部分树形表格都没有拖拽功能，所以决定自己实现一个。这里分享一下实现过程，项目源代码请看github，插件已打包封装好，发布到上　

本博文会分为两部分，第一部分为使用方式，第二部分为实现方式

安装方式

npm i drag-tree-table --save-dev

使用方式

import dragtreetable from 'drag-tree-table'

 模版写法

<dragtreetable :data="treedata" :ondrag="ontreedatachange"></dragtreetable> 

data参数示例

{
 lists: [
 {
 "id":40,
 "parent_id":0,
 "order":0,
 "name":"动物类",
 "open":true,
 "lists":[]
 },{
 "id":5,
 "parent_id":0,
 "order":1,
 "name":"昆虫类",
 "open":true,
 "lists":[
  {
  "id":12,
  "parent_id":5,
  "open":true,
  "order":0,
  "name":"蚂蚁",
  "lists":[]
  }
 ]
 },
 {
 "id":19,
 "parent_id":0,
 "order":2,
 "name":"植物类",
 "open":true,
 "lists":[]
 }
　],
 columns: [
 {
 type: 'selection',
 title: '名称',
 field: 'name',
 width: 200,
 align: 'center',
 formatter: (item) => {
  return '<a>'+item.name+'</a>'
 }
 },
 {
 title: '操作',
 type: 'action',
 width: 350,
 align: 'center',
 actions: [
  {
  text: '查看角色',
  onclick: this.ondetail,
  formatter: (item) => {
   return '<i>查看角色</i>'
  }
  },
  {
  text: '编辑',
  onclick: this.onedit,
  formatter: (item) => {
   return '<i>编辑</i>'
  }
  }
 ]
 },
 ]
} 

 ondrag在表格拖拽时触发，返回新的list

ontreedatachange(lists) {
 this.treedata.lists = lists
} 

到这里组件的使用方式已经介绍完毕

实现

•递归生成树姓结构（非jsx方式实现）
•实现拖拽排序（借助h5的dragable属性）
•单元格内容自定义展示

组件拆分-共分为四个组件

　　dragtreetable.vue是入口组件，定义整体结构

　　row是递归组件（核心组件）

　　clolmn单元格，内容承载

　　space控制缩进

看一下dragtreetable的结构

<template>
 <div class="drag-tree-table">
  <div class="drag-tree-table-header">
   <column
   v-for="(item, index) in data.columns"
   :width="item.width"
   :key="index" >
   {{item.title}}
   </column>
  </div>
  <div class="drag-tree-table-body" @dragover="draging" @dragend="drop">
   <row depth="0" :columns="data.columns"
   :model="item" v-for="(item, index) in data.lists" :key="index">
  </row>
  </div>
 </div>
</template> 

看起来分原生table很像，dragtreetable主要定义了tree的框架，并实现拖拽逻辑

filter函数用来匹配当前鼠标悬浮在哪个行内，并分为三部分，上中下，并对当前匹配的行进行高亮

resettreedata当drop触发时调用，该方法会重新生成一个新的排完序的数据，然后返回父组件

下面是所有实现代码

<script>
 import row from './row.vue'
 import column from './column.vue'
 import space from './space.vue'
 document.body.ondrop = function (event) {
 event.preventdefault();
 event.stoppropagation();
 }
 export default {
 name: "dragtreetable",
 components: {
  row,
  column,
  space
 },
 props: {
  data: object,
  ondrag: function
 },
 data() {
  return {
  treedata: [],
  dragx: 0,
  dragy: 0,
  dragid: '',
  targetid: '',
  whereinsert: ''
  }
 },
 methods: {
  getelementleft(element) {
  var actualleft = element.offsetleft;
  var current = element.offsetparent;
  while (current !== null){
   actualleft += current.offsetleft;
   current = current.offsetparent;
  }
  return actualleft
  },
  getelementtop(element) {
  var actualtop = element.offsettop;
  var current = element.offsetparent;
  while (current !== null) {
   actualtop += current.offsettop;
   current = current.offsetparent;
  }
  return actualtop
  },
  draging(e) {
  if (e.pagex == this.dragx && e.pagey == this.dragy) return
  this.dragx = e.pagex
  this.dragy = e.pagey
  this.filter(e.pagex, e.pagey)
  },
  drop(event) {
  this.clearhoverstatus()
  this.resettreedata()
  },
  filter(x,y) {
  var rows = document.queryselectorall('.tree-row')
  this.targetid = undefined
  for(let i=0; i < rows.length; i++) {
   const row = rows[i]
   const rx = this.getelementleft(row);
   const ry = this.getelementtop(row);
   const rw = row.clientwidth;
   const rh = row.clientheight;
   if (x > rx && x < (rx + rw) && y > ry && y < (ry + rh)) {
   const diffy = y - ry
   const hoverblock = row.children[row.children.length - 1]
   hoverblock.style.display = 'block'
   const targetid = row.getattribute('tree-id')
   if (targetid == window.dragid){
    this.targetid = undefined
    return
   }
   this.targetid = targetid
   let whereinsert = ''
   var rowheight = document.getelementsbyclassname('tree-row')[0].clientheight
   if (diffy/rowheight > 3/4) {
    console.log(111, hoverblock.children[2].style)
    if (hoverblock.children[2].style.opacity !== '0.5') {
    this.clearhoverstatus()
    hoverblock.children[2].style.opacity = 0.5
    }
    whereinsert = 'bottom'
   } else if (diffy/rowheight > 1/4) {
    if (hoverblock.children[1].style.opacity !== '0.5') {
    this.clearhoverstatus()
    hoverblock.children[1].style.opacity = 0.5
    }
    whereinsert = 'center'
   } else {
    if (hoverblock.children[0].style.opacity !== '0.5') {
    this.clearhoverstatus()
    hoverblock.children[0].style.opacity = 0.5
    }
    whereinsert = 'top'
   }
   this.whereinsert = whereinsert
   }
  }
  },
  clearhoverstatus() {
  var rows = document.queryselectorall('.tree-row')
  for(let i=0; i < rows.length; i++) {
   const row = rows[i]
   const hoverblock = row.children[row.children.length - 1]
   hoverblock.style.display = 'none'
   hoverblock.children[0].style.opacity = 0.1
   hoverblock.children[1].style.opacity = 0.1
   hoverblock.children[2].style.opacity = 0.1
  }
  },
  resettreedata() {
  if (this.targetid === undefined) return 
  const newlist = []
  const curlist = this.data.lists
  const _this = this
  function pushdata(curlist, needpushlist) {
   for( let i = 0; i < curlist.length; i++) {
   const item = curlist[i]
   var obj = _this.deepclone(item)
   obj.lists = []
   if (_this.targetid == item.id) {
    const curdragitem = _this.getcurdragitem(_this.data.lists, window.dragid)
    if (_this.whereinsert === 'top') {
    curdragitem.parent_id = item.parent_id
    needpushlist.push(curdragitem)
    needpushlist.push(obj)
    } else if (_this.whereinsert === 'center'){
    curdragitem.parent_id = item.id
    obj.lists.push(curdragitem)
    needpushlist.push(obj)
    } else {
    curdragitem.parent_id = item.parent_id
    needpushlist.push(obj)
    needpushlist.push(curdragitem)
    }
   } else {
    if (window.dragid != item.id)
    needpushlist.push(obj)
   }
   if (item.lists && item.lists.length) {
    pushdata(item.lists, obj.lists)
   }
   }
  }
  pushdata(curlist, newlist)
  this.ondrag(newlist)
  },
  deepclone (aobject) {
  if (!aobject) {
   return aobject;
  }
  var bobject, v, k;
  bobject = array.isarray(aobject) ? [] : {};
  for (k in aobject) {
   v = aobject[k];
   bobject[k] = (typeof v === "object") ? this.deepclone(v) : v;
  }
  return bobject;
  },
  getcurdragitem(lists, id) {
  var curitem = null
  var _this = this
  function getchild(curlist) {
   for( let i = 0; i < curlist.length; i++) {
   var item = curlist[i]
   if (item.id == id) {
    curitem = json.parse(json.stringify(item))
    break
   } else if (item.lists && item.lists.length) {
    getchild(item.lists)
   }
   }
  }
  getchild(lists)
  return curitem;
  }
 }
 }
</script>

row组件核心在于递归，并注册拖拽事件，v-html支持传入函数，这样可以实现自定义展示，渲染数据时需要判断是否有子节点，有的画递归调用本身，并传入子节点数据

结构如下

<template>
  <div class="tree-block" draggable="true" @dragstart="dragstart($event)"
   @dragend="dragend($event)">
   <div class="tree-row" 
    @click="toggle" 
    :tree-id="model.id"
    :tree-p-id="model.parent_id"> 
    <column
     v-for="(subitem, subindex) in columns"
     v-bind:class="'align-' + subitem.align"
     :field="subitem.field"
     :width="subitem.width"
     :key="subindex">
     <span v-if="subitem.type === 'selection'">
      <space :depth="depth"/>
      <span v-if = "model.lists && model.lists.length" class="zip-icon" v-bind:class="[model.open ? 'arrow-bottom' : 'arrow-right']">
      </span>
      <span v-else class="zip-icon arrow-transparent">
      </span>
      <span v-if="subitem.formatter" v-html="subitem.formatter(model)"></span>
      <span v-else v-html="model[subitem.field]"></span>

     </span>
     <span v-else-if="subitem.type === 'action'">
      <a class="action-item"
       v-for="(acitem, acindex) in subitem.actions"
       :key="acindex"
       type="text" size="small" 
       @click.stop.prevent="acitem.onclick(model)">
       <i :class="acitem.icon" v-html="acitem.formatter(model)"></i> 
      </a>
     </span>
     <span v-else-if="subitem.type === 'icon'">
       {{model[subitem.field]}}
     </span>
     <span v-else>
      {{model[subitem.field]}}
     </span>
    </column>
    <div class="hover-model" style="display: none">
     <div class="hover-block prev-block">
      <i class="el-icon-caret-top"></i>
     </div>
     <div class="hover-block center-block">
      <i class="el-icon-caret-right"></i>
     </div>
     <div class="hover-block next-block">
      <i class="el-icon-caret-bottom"></i>
     </div>
    </div>
   </div>
   <row 
    v-show="model.open"
    v-for="(item, index) in model.lists" 
    :model="item"
    :columns="columns"
    :key="index" 
    :depth="depth * 1 + 1"
    v-if="isfolder">
   </row>
  </div>
  
 </template>
 <script>
 import column from './column.vue'
 import space from './space.vue'
 export default {
  name: 'row',
  props: ['model','depth','columns'],
  data() {
   return {
    open: false,
    visibility: 'visible'
   }
  },
  components: {
   column,
   space
  },
  computed: {
   isfolder() {
    return this.model.lists && this.model.lists.length
   }
  },
  methods: {
   toggle() {
    if(this.isfolder) {
     this.model.open = !this.model.open
    }
   },
   dragstart(e) {
    e.datatransfer.setdata('text', this.id);
    window.dragid = e.target.children[0].getattribute('tree-id')
    e.target.style.opacity = 0.2
   },
   dragend(e) {
    e.target.style.opacity = 1;
    
   }
  }
 }

clolmn和space比较简单，这里就不过多阐述

上面就是整个实现过程，组件在chrome上运行稳定，因为用h5的dragable，所以兼容会有点问题，后续会修改拖拽的实现方式，手动实现拖拽

总结

以上所述是小编给大家介绍的基于vue实现可以拖拽的树形表格实例详解，希望对大家有所帮助