欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element-ui tree結(jié)構(gòu)實現(xiàn)增刪改自定義功能代碼

 更新時間:2020年08月31日 10:27:11   作者:一行注釋  
這篇文章主要介紹了element-ui tree結(jié)構(gòu)實現(xiàn)增刪改自定義功能代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

首先是頁面部分

<template>
 <el-tree
  id="userMtree"
  ref="tree"
  :data="treeData"
  node-key="id"
  :render-content="renderContent"
  :expand-on-click-node="false"
  @node-click="nodeClick"
  :default-expanded-keys='expandedKey'
 ></el-tree>
</template>

下面是js部分

export default {
 props:['treeDataObj','isUserMgt'],//父級傳值 與判斷哪個tree
 data () {
  return {
   treeData:[],//tree數(shù)據(jù)
   expandedKey:[],//展開節(jié)點
   checkedID:''//選中節(jié)點
  }
 },
 mounted(){
  this.treeData=this.treeDataObj.treeData
  let userMtree=document.getElementById('userMtree')
  this.$nextTick(()=>{
   userMtree.firstElementChild.classList.add("is-current");//添加選中類名
  })
  this.checkedID=this.treeData[0].id//默認選中第一個
 },
 methods:{
//編輯
  nodeEdit(ev, store, data) {
   data.isEdit = true;
   this.$nextTick(() => {//得到input
    const $input =
     ev.target.parentNode.parentNode.querySelector("input") ||
     ev.target.parentElement.parentElement.querySelector("input");
 
    !$input ? "" : $input.focus();//獲取焦點
   });
  },
//失焦事件
  edit_sure(ev, data) {
   const $input =
    ev.target.parentNode.parentNode.querySelector("input") ||
    ev.target.parentElement.parentElement.querySelector("input");
   if (!$input) {
    return false;
   } else if($input.value==''){
    this.$message({
     type: "info",
     message: "內(nèi)容不能為空!"
    });
   }else{//賦值value
    data.label = $input.value;
    data.isEdit = false;
   }
  },
//react方法 插入代碼
  renderContent(h, { node, data, store }) {
   return (
    <span class="custom-tree-node">
     <span class="tree_node_label">{this.showOrEdit(data)}</span>
     <div class="tree_node_op">
      <i class="el-icon-edit" on-click={ev => this.nodeEdit(ev, store, data)}/>
      <i class="el-icon-remove-outline" 
      on-click={() => this.nodeDelete(node, data)}/>
      {
       this.isUserMgt?<i class="el-icon-circle-plus-outline" 
        on-click={() => this.append( data)}></i>:''        
      }
     </div>
    </span>
   );
  },
  showOrEdit(data) {
   if (data.isEdit) {
    return (
     <input type="text" class="node_labe" value={data.label} 
      on-blur={ev => this.edit_sure(ev, data)} />
    );
   } else {
    return <span class="node_labe">{data.label}</span>;
   }
  },
//新增節(jié)點
  append(data) {
   const newChild = { id: new Date().getTime(), label: '', children: [],
      isEdit: true };
//判斷是否有子節(jié)點
   if (!data.children) {
    this.$set(data, 'children', []);
   }
   data.children.push(newChild);
   this.expandedKey=[data]//展開點擊節(jié)點
  },
//移除節(jié)點
  nodeDelete(node, data) {
   const parent = node.parent
   const children = parent.data.children || parent.data
   const index = children.findIndex(d => d.id === data.id)
   children.splice(index, 1)
  },
//點擊節(jié)點 移除默認選中節(jié)點
  nodeClick(data){
   let userMtree=document.getElementById('userMtree')
   userMtree.firstElementChild.classList.remove("is-current");
   this.checkedID=data.id
   console.log(data)
   this.$emit('emitClickNode',data)
  }
 }
}

補充知識:vue前端基礎(chǔ)之組件封裝(樹組件的封裝附帶增刪改查方法)

組件封裝的意義

組件封裝的意義其實很好理解,對于一段復(fù)用性極高的代碼,就需要進行組件封裝以減少冗余代碼。

樹的封裝

<template>
 <el-aside width="180px">
  <h3 class="el-icon-folder" style="margin: 0px">
   {{ name }}
  </h3>
  <el-tree
   ref="tree"
   :data="setTree"
   :props="defaultProps"
   node-key="id"
   style="margin-top:20px"
   accordion
   @node-contextmenu="rihgtClick"
  >
   <span slot-scope="{ node, data }" class="span-ellipsis">
    <span v-show="!node.isEdit">
     <span v-show="data.children && data.children.length >= 1">
      <span :title="node.label">{{ node.label }}</span>
     </span>
     <span v-show="!data.children || data.children.length == 0">
      <span :title="node.label"> {{ node.label }}</span>
     </span>
    </span>
   </span>
  </el-tree>
  <!--鼠標右鍵點擊出現(xiàn)頁面-->
  <div v-show="menuVisible">
   <el-menu
    id="rightClickMenu"
    class="el-menu-vertical"
    text-color="#000000"
    active-text-color="#000000"
    @select="handleRightSelect"
   >
    <el-menu-item index="1" :hidden="showQuery" class="menuItem">
     <span slot="title">查詢</span>
    </el-menu-item>
    <el-menu-item index="2" :hidden="showSave" class="menuItem">
     <span slot="title">添加</span>
    </el-menu-item>
    <el-menu-item index="3" :hidden="showUpdate" class="menuItem">
     <span slot="title">修改</span>
    </el-menu-item>
    <el-menu-item index="4" :hidden="showDelete" class="menuItem">
     <span slot="title">刪除</span>
    </el-menu-item>
   </el-menu>
  </div>
 </el-aside>
</template>
<script>
export default {
 name: 'Tree',
 props: {
  treeData: {
   type: Array,
   required: true
  },
  treeName: {
   type: String,
   required: true,
   default: '樹'
  },
  isHiddenQuery: {
   type: Boolean,
   required: false,
   default: true
  },
  isHiddenSave: {
   type: Boolean,
   required: false,
   default: false
  },
  isHiddenUpdate: {
   type: Boolean,
   required: false,
   default: false
  },
  isHiddenDelete: {
   type: Boolean,
   required: false,
   default: false
  }
 },
 data() {
  return {
   setTree: this.treeData,
   showQuery: this.isHiddenQuery,
   showSave: this.isHiddenSave,
   showUpdate: this.isHiddenUpdate,
   showDelete: this.isHiddenDelete,
   name: this.treeName,
   TREEDATA: {
    DATA: null,
    NODE: null
   },
   isLoadingTree: true, // 是否加載節(jié)點樹
   objectID: null,
   defaultProps: {
    children: 'children',
    label: 'name'
   },
   menuVisible: this.menuVisible
  }
 },
 watch: {
  treeData(val) {
   this.setTree = val
  },
  treeName(val) {
   this.name = val
  }
 },
 methods: {
  handleRightSelect(key) {
   if (key === '1') {
    this.$emit('NodeQuery', this.TREEDATA)
    this.menuVisible = false
   } else if (key === '2') {
    this.$emit('NodeAdd', this.TREEDATA)
    this.menuVisible = false
   } else if (key === '3') {
    this.$emit('NodeUpdate', this.TREEDATA)
    this.menuVisible = false
   } else if (key === '4') {
    this.$emit('NodeDel', this.TREEDATA)
    this.menuVisible = false
   }
  },
  rihgtClick(event, object, value, element) {
   if (this.objectID !== object.id) {
    this.objectID = object.id
    this.menuVisible = true
    this.TREEDATA.DATA = object
    this.TREEDATA.NODE = value
   } else {
    this.menuVisible = !this.menuVisible
   }
   document.addEventListener('click', e => {
    this.menuVisible = false
   })
   const menu = document.querySelector('#rightClickMenu')
   /* 菜單定位基于鼠標點擊位置 */
   menu.style.left = event.clientX - 180 + 'px'
   menu.style.top = event.clientY - 100 + 'px'
   menu.style.position = 'absolute' // 為新創(chuàng)建的DIV指定絕對定位
   menu.style.width = 120 + 'px'
  }
 }
}

</script>

<style lang="scss" scoped>
.span-ellipsis {
 width: 100%;
 overflow: hidden;
 margin-left: 10px;
 white-space: nowrap;
 text-overflow: ellipsis;
}
</style>

對于組件的引用

import tree from '@/components/Tree/index'
export default {
 components: { tree },
 data() {}
 ......

組件的使用

<tree
 :tree-data="setTree"
 :tree-name="treeName"
 @NodeAdd="NodeAdd"
 @NodeUpdate="NodeUpdate"
 @NodeDel="NodeDel"
/>

setTree是要給樹賦予的值,treeName是樹的標題(可不要),后面是需要的樹的右鍵操作我啟用了增刪改

效果圖

子組件向父組件傳值

handleRightSelect(key) {
 if (key === '1') {
  this.$emit('NodeQuery', this.TREEDATA)
  this.menuVisible = false
 } else if (key === '2') {
  this.$emit('NodeAdd', this.TREEDATA)
  this.menuVisible = false
 } else if (key === '3') {
  this.$emit('NodeUpdate', this.TREEDATA)
  this.menuVisible = false
 } else if (key === '4') {
  this.$emit('NodeDel', this.TREEDATA)
  this.menuVisible = false
 }
}

以上這篇element-ui tree結(jié)構(gòu)實現(xiàn)增刪改自定義功能代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue編譯優(yōu)化實現(xiàn)流程詳解

    Vue編譯優(yōu)化實現(xiàn)流程詳解

    編譯優(yōu)化指的是編譯器將模板編譯為渲染函數(shù)的過程中,盡可能多的提取關(guān)鍵信息,并以此指導(dǎo)生成最優(yōu)代碼的過程,優(yōu)化的方向主要是區(qū)分動態(tài)內(nèi)容和靜態(tài)內(nèi)容,并針對不同的內(nèi)容采用不同的優(yōu)化策略
    2023-01-01
  • Vue商品控件與購物車聯(lián)動效果的實例代碼

    Vue商品控件與購物車聯(lián)動效果的實例代碼

    這篇文章主要介紹了Vue商品控件與購物車聯(lián)動效果的實例代碼,代碼簡單易懂非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-07-07
  • 詳解如何配置vue-cli3.0的vue.config.js

    詳解如何配置vue-cli3.0的vue.config.js

    這篇文章主要介紹了詳解如何配置vue-cli3.0的vue.config.js,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • vue項目移動端實現(xiàn)ip輸入框問題

    vue項目移動端實現(xiàn)ip輸入框問題

    這篇文章主要介紹了vue項目移動端實現(xiàn)ip輸入框問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-03-03
  • Vue2.0 從零開始_環(huán)境搭建操作步驟

    Vue2.0 從零開始_環(huán)境搭建操作步驟

    下面小編就為大家?guī)硪黄猇ue2.0 從零開始_環(huán)境搭建操作步驟。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • vue項目中使用qrcodesjs2生成二維碼簡單示例

    vue項目中使用qrcodesjs2生成二維碼簡單示例

    最近項目中需生成二維碼,發(fā)現(xiàn)了很好用的插件qrcodesjs2,所以下面這篇文章主要給大家介紹了關(guān)于vue項目中使用qrcodesjs2生成二維碼的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-05-05
  • Vue3之 Vue CLI多環(huán)境配置

    Vue3之 Vue CLI多環(huán)境配置

    這篇文章主要介紹了Vue3之 Vue CLI多環(huán)境配置,通俗點說就是使用配置文件來管理多環(huán)境,實現(xiàn)環(huán)境的切換,西阿棉詳細內(nèi)容,需要的朋友可以參考一下
    2021-11-11
  • Vue.js 3.x 中的響應(yīng)式數(shù)據(jù)ref 與 reactive詳解

    Vue.js 3.x 中的響應(yīng)式數(shù)據(jù)ref 與 reactive詳解

    ref 和 reactive 是 Vue.js 3 中用于創(chuàng)建響應(yīng)式數(shù)據(jù)的兩個關(guān)鍵函數(shù),它們分別適用于不同類型的數(shù)據(jù),幫助我們更好地組織和管理組件的狀態(tài),這篇文章主要介紹了Vue.js 3.x 中的響應(yīng)式數(shù)據(jù):ref 與 reactive,需要的朋友可以參考下
    2024-01-01
  • vue2單元測試環(huán)境搭建

    vue2單元測試環(huán)境搭建

    本篇文章給大家分享了vue2單元測試環(huán)境搭建的詳細步驟,對此有需要的朋友參考學(xué)習(xí)下。
    2018-05-05
  • Vue3?中的模板語法小結(jié)

    Vue3?中的模板語法小結(jié)

    Vue 使用一種基于 HTML 的模板語法,使我們能夠聲明式地將其組件實例的數(shù)據(jù)綁定到呈現(xiàn)的 DOM 上,這篇文章主要介紹了Vue3?中的模板語法,需要的朋友可以參考下
    2023-03-03

最新評論