row组件核心在于递归，并注册拖拽事件，v-html支持传入函数，这样可以实现自定义展示，渲染数据时需要判断是否有子节点，有的画递归调用本身，并传入子节点数据
结构如下
<template> <div draggable="true" @dragstart="dragstart($event)" @dragend="dragend($event)"> <div @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" v-bind:class="[model.open ? 'arrow-bottom' : 'arrow-right']"> </span> <span v-else> </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 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> <div> <i></i> </div> <div> <i></i> </div> <div> <i></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，所以兼容会有点问题，后续会修改拖拽的实现方式，手动实现拖拽
总结