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

el-tree懶加載的實現(xiàn)以及局部刷新方式

 更新時間:2023年04月24日 08:55:52   作者:微笑的魚_  
這篇文章主要介紹了el-tree懶加載的實現(xiàn)以及局部刷新方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

el-tree懶加載的實現(xiàn)及局部刷新

整個樹結(jié)構(gòu)如下

使用懶加載實現(xiàn),第一個按鈕可以折疊收縮,第二個按鈕刷新,第三個按鈕新增第一級節(jié)點

新增第一級節(jié)點的彈窗

右側(cè)懸浮顯示操作按鈕

在第一級右側(cè)點擊按鈕新增第二級節(jié)點的彈窗

html代碼

<el-aside style="width: 15%;border-right: 1px solid rgb(238, 238, 238);">
	<div style="display:flex">
			<div style="width:86%">
				<el-input class="tree-search-input" clearable prefix-icon="el-icon-search" placeholder="輸入關(guān)鍵字進(jìn)行過濾" size="mini" v-model="filterText" @input="filterChange($event)"></el-input>
			</div>
			<div style="display:flex;align-items:center;">
				<i style="margin-right:5px;font-size: 18px;font-weight: bold;" :title="expandNode?'收起':'展開'" :class="{'el-icon-full-screen':!expandNode,'el-icon-crop':expandNode}" @click="nodeExpand"></i>
				<i title="刷新" class="el-icon-refresh" style="margin-right:5px;font-size: 18px;font-weight: bold;" @click="getQmsProductTree"></i>
				<i title="新增" class="el-icon-plus" style="font-size: 18px;font-weight: bold;" @click="showDialog({NAME:'第一級目錄',ID:0},'add')"></i>
			</div>
		</div>
		<el-tree class="my-el-tree" :data="treeData" highlight-current :expand-on-click-node="true" ref="elTree" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="expandNode" :filter-node-method="filterNode" lazy :load="loadNode" node-key="ID">
			<span class="custom-tree-node" slot-scope="{ node, data }">
				<span class="show-ellipsis" style="width: 90%" :title="node.NAME">{{ data.NAME }}</span>
				<el-dropdown size="mini" @command="menuHandleCommand">
					<span class="el-dropdown-link">
						<i title="更多操作" class="el-icon-more"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item icon="el-icon-plus" :command="{ node: node, data, action: 'add' }">添加</el-dropdown-item>
						<el-dropdown-item icon="el-icon-edit" :command="{ node: node, data, action: 'edit' }">編輯</el-dropdown-item>
						<el-dropdown-item divided icon="el-icon-delete" :command="{ node: node, data, action: 'delete' }">刪除</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</span>
		</el-tree>
	</el-aside>

樹節(jié)點新增編輯操作彈窗

<el-dialog class="custom-class" :title="modularTitle" :visible.sync="showMenuDialog" v-if="showMenuDialog" width="40%">
	<el-form label-width="130px" size="mini" ref="menuRuleForm" :model="menuRuleForm" :rules="menuRules">
		<el-form-item v-if="menuState===0" label="父節(jié)點:">
			<el-input style="width: 90%" v-model="menuRuleForm.PARENT_NAME" disabled></el-input>
		</el-form-item>
		<el-form-item label="目錄名稱:" prop="NAME">
			<el-input style="width: 90%" v-model="menuRuleForm.NAME" placeholder="請輸入目錄名"></el-input>
		</el-form-item>
	</el-form>
	<div align="center">
		<el-button size="mini" type="primary" @click="saveMenu">保 存</el-button>
		<el-button size="mini" @click="closeMenuDialog">取 消</el-button>
	</div>
</el-dialog>

js代碼,

refreshTreeNode方法如果是操作第一級節(jié)點就刷新整個樹,如果操作的二級或三級節(jié)點則局部刷新,

let node_ = this.$refs.elTree.getNode(id); node_.loaded = false; node_.expand();

通過id獲取父節(jié)點,通過收縮展開父節(jié)點實現(xiàn)父節(jié)點的刷新

//  懶加載樹
  loadNode:function(node, resolve) {
      if (node.level === 0) {
        return resolve([]);
      }
      axios({
          url:`/magic/api/qms/tree/getChildrenData`,
          method:'post',
          data: {
              TYPE: 'PRC',
              ID: node.data.ID
          }
      }).then(res=>{
          if(res && res.data && res.data.data) {
              resolve(res.data.data);
          }
      })
  },
  //樹根節(jié)點加載
  getQmsProductTree:function(){
      axios({
          url:`/tree/getChildrenData`,
          method:'post',
          data: {
              TYPE: 'PRC'
          }
      }).then(res=>{
          if(res && res.data && res.data.data) {
              if(res.data.data.length>0){
                  this.treeData=res.data.data
                  this.dic_id = res.data.data[0].ID
              }
          }
      })
   },
  //樹節(jié)點點擊加載列表
  handleNodeClick:function(data, node, obj) {
      this.dic_id=data.ID
      this.initData(1);
  },  
  //樹形控件收起與展開功能
  nodeExpand:function(){
      this.expandNode = !this.expandNode
      let elTree = this.$refs.elTree;
      for (var i = 0; i < elTree.store._getAllNodes().length; i++) {
          elTree.store._getAllNodes()[i].expanded = this.expandNode;
      }
  },
  //樹過濾
  filterNode:function(value, data, node) {
      if (!value) return true;
      return data.NAME.indexOf(value) !== -1;
  },
  //類型樹形控件查詢功能
  filterChange:function (val) {
      this.$refs.elTree.filter(val);
  },
  // 刷新樹節(jié)點
  refreshTreeNode:function(PARENT_ID) {
      let id = PARENT_ID?PARENT_ID:this.menuRuleForm.PARENT_ID
      if(id && id !== '0'){
          let node_ = this.$refs.elTree.getNode(id)
          node_.loaded = false;
          node_.expand();
      }else{
          this.getQmsProductTree();
      }
  },
 //初始化調(diào)用一次接口
   init: function() {
       this.getQmsProductTree();
       this.initData(1);
   }, 
   //樹的按鈕增刪改事件
   menuHandleCommand:function(command){
       let data = command.data;
	let action = command.action;
	switch (action) {
		case 'add':
			this.showDialog(data, action);
			break;
		case 'edit':
			this.showDialog(data, action);
			break;
		case 'delete':
			this.delSysType(data);
			break;
	}
   },
   //點擊按鈕打開彈框添加菜單
showDialog:function(data, action) {
	this.showMenuDialog = true;
	if (data) {
		if (action == 'add') {
			this.modularTitle = '新增';
			this.menuRuleForm = {
                   NAME:'',
                   PARENT_ID: data.ID,
                   PARENT_NAME: data.NAME
               };
               this.menuState = 0;

		} else if (action == 'edit') {
			this.modularTitle = '編輯';
           	this.menuRuleForm = {
                   NAME: data.NAME,
                   ID: data.ID,
                   PARENT_ID:data.PARENT_ID
               };
               this.menuState = 1;
		}
	}
},
//保存菜單
   saveMenu:function(){
       this.$refs.menuRuleForm.validate((valid)=>{
           if(valid) {
               let param = {
                   NAME: this.menuRuleForm.NAME
               }
               if(this.menuState === 0) {
                   param.PARENT_ID = this.menuRuleForm.PARENT_ID
                   param.TYPE = 'PRC'
               }
               if(this.menuState === 1) {
                   param.ID = this.menuRuleForm.ID
               }
               axios({
                   url:'/tree/save',
                   method:'post',
                   data: param
               }).then(res=>{
                   if(res.data.state){
                       this.$message({type: 'success',message: res.data.message});
                       this.showMenuDialog = false;
                       this.refreshTreeNode()
                   }else{
                       this.$message({type: 'error',message: res.data.message});
                   }
               })   
           }
       })
   },
//刪除樹數(shù)據(jù)
delSysType:function(data) {
	this.$confirm('是否確定刪除?', '提示', {
		confirmButtonText: '確定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		axios({
               url:'/tree/delete',
               method:'post',
               data: data
           }).then(res=>{
               if(res.data.state){
                   this.$message({type: 'success',message: res.data.message});
                   this.showMenuDialog = false;
                   this.refreshTreeNode(data.PARENT_ID)
               }else{
                   this.$message({type: 'error',message: res.data.message});
               }
           })
	});
},
//關(guān)閉菜單添加編輯按鈕
closeMenuDialog:function(){
    this.showMenuDialog=false;
},

總結(jié)

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue實現(xiàn)word,pdf文件的導(dǎo)出功能

    vue實現(xiàn)word,pdf文件的導(dǎo)出功能

    這篇文章給大家介紹了vue實現(xiàn)word或pdf文檔導(dǎo)出的功能,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧
    2018-07-07
  • vue踩坑記錄之echarts動態(tài)數(shù)據(jù)刷新問題

    vue踩坑記錄之echarts動態(tài)數(shù)據(jù)刷新問題

    這篇文章主要介紹了vue踩坑記錄之echarts動態(tài)數(shù)據(jù)刷新問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • vue學(xué)習(xí)筆記之slot插槽用法實例分析

    vue學(xué)習(xí)筆記之slot插槽用法實例分析

    這篇文章主要介紹了vue學(xué)習(xí)筆記之slot插槽用法,結(jié)合實例形式對比分析了vue使用slot插槽的相關(guān)操作技巧與注意事項,需要的朋友可以參考下
    2020-02-02
  • 基于form-data請求格式詳解

    基于form-data請求格式詳解

    今天小編就為大家分享一篇基于form-data請求格式詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • vue上傳文件formData上傳的解決全流程

    vue上傳文件formData上傳的解決全流程

    這篇文章主要介紹了vue上傳文件formData上傳的解決全流程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vue.js的computed,filter,get,set的用法及區(qū)別詳解

    vue.js的computed,filter,get,set的用法及區(qū)別詳解

    下面小編就為大家分享一篇vue.js的computed,filter,get,set的用法及區(qū)別詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue多頁面項目開發(fā)實戰(zhàn)指南

    vue多頁面項目開發(fā)實戰(zhàn)指南

    一般我們的vue項目都是單頁面的,其實因為vue在工程化開發(fā)的時候依賴了webpack,webpack幫我們將所有的資源整合到一起而形成一個單頁面,下面這篇文章主要給大家介紹了關(guān)于vue多頁面項目開發(fā)的相關(guān)資料,需要的朋友可以參考下
    2022-01-01
  • 詳解vue-loader在項目中是如何配置的

    詳解vue-loader在項目中是如何配置的

    這篇文章主要介紹了詳解vue-loader在項目中是如何配置的,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06
  • vue+element UI中如何給指定日期添加標(biāo)記

    vue+element UI中如何給指定日期添加標(biāo)記

    這篇文章主要介紹了vue+element UI中如何給指定日期添加標(biāo)記問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-02-02
  • vue3組合式API中setup()概念和reactive()函數(shù)的用法

    vue3組合式API中setup()概念和reactive()函數(shù)的用法

    這篇文章主要介紹了vue3組合式API中setup()概念和reactive()函數(shù)的用法,接下來的事件,我將帶著你從淺到深分析為什么我們需要學(xué)習(xí)組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個基本的使用方式,需要的朋友可以參考下
    2023-03-03

最新評論