el-tree的可拖拽效果太不明顯，產(chǎn)品需要添加可拖拽的效果，弄了個陰影。


項目需求是只能同級拖拽，無法跨級拖拽。點擊層級的切換順序的按鈕，出現(xiàn)拖拽效果。

 <el-tree :load="loadNode" lazy :draggable="sequenceFlag" :allow-drop="allowDrop">
  <template slot-scope="{ node, data }">
  	<div :class="{'draggable-item':orderList.findIndex((item) => item ==data.id) !== -1}">
  ...
  <span class="hover-btn">
   <el-button type="text" @click.stop="setOrderList(node,data)" v-show="sequenceFlag == false">
     <svg-icon iconname="zt_zidongpaixu" size="16"></svg-icon>
   </el-button>
   <el-button type="text" @click.stop="getOrderList(node,data)"
     v-show="sequenceFlag && data.id === orderId">
     <svg-icon iconname="zt_wancheng1" size="16" style="color:#16C6BE"></svg-icon>
   </el-button>
 </span>
  </template>
  </el-tree>

//只允許同級拖拽
allowDrop(draggingNode, dropNode, type) {
    // console.log(draggingNode, dropNode, type);
    if (this.orderList.findIndex((item) => item == draggingNode.data.id) !== -1) {
      if (draggingNode.level === dropNode.level) {
        if (draggingNode.data.parentId === dropNode.data.parentId) {
          return type === 'prev' || type === 'next';
        } else {
          return false;
        }
      } else {
        // 不同級進(jìn)行處理
        return false;
      }
    } else {
      return false;
    }
  }
  
setOrderList(node, data) {
	this.orderList = [];
	if (data.children.length > 0) {
        this.sequenceFlag = true;
        data.children.map((item, index) => {
          this.orderList.push(item.id);
     });
	//樣式效果代碼
    let dragNode: any = document.getElementsByClassName('draggable-item');
    setTimeout(() => {
      // getElementsByClassName拿到的用foreach等方法無法遍歷
      for (let i = 0; i < dragNode.length; i++) {
        let parent = dragNode[i].parentNode;
        parent.classList.add('AssetsDraggingNode');
      }
    }, 500);
  }

css代碼必須去掉scoped才能實現(xiàn)文章來源地址http://www.zghlxwxcb.cn/news/detail-521992.html

<style lang="scss">
.AssetsDraggingNode {
  box-shadow: 0 0 6px #888;
  margin: 10px 5px;
  border-radius: 4px;
}
</style>

到了這里，關(guān)于【element ui】el-tree拖拽增加樣式效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！