eltree ref什么时候有_el-tree 节点动态查找

更新：树的查询组件。(觉得原来好傻逼)

1效果图

未查找时：

查找时：

2代码

style="height: 100%;"

class="bd"

>

class="padding-gutter"

style="height: 45px;"

>

v-model="searchInput"

:disabled="btnDisable"

class="width-full"

suffix-icon="el-icon-search"

placeholder="请输入查找内容"

size="mini"

/>

ref="usertree"

:data="data"

:default-expanded-keys="expandKeys"

:node-key="treeProps.idKey"

:highlight-current="true"

render-after-expand

class="g-mnc"

:filter-node-method="filterNode"

:props="treeProps"

@current-change="currentChange"

/>

import Bus from '.././assets/bus'

import { Message } from 'element-ui'

import { MessageBox } from 'element-ui'

import {transformTree2Array} from '../../common/js/util'

//import { returnChildDataByPar } from '.././ipUtil.js'

export default {

name: "TreeApp",

props:{

data: {

type: Array,

},

mode: String,

props: {

type: Object,

default() {

return {}

}

},

btnDisable:Boolean,//true:修改状态

hasModify:Boolean,//页面内容是否已修改 true:已修改

},

// props:['btnDisable','treeUserData','treeUserDataBack'],

data() {

return {

loading: false,

searchInput: '', // 树过滤关键字

treeProps: {

children: 'zones',

label: 'code_name',

isLeaf: 'leaf',

idKey: 'chr_id',

// isLeaf: 'isLeaf'

},

expandAll: false,

oldKey:'',

};

},

computed: {

expandKeys() {

let list = transformTree2Array(this.data)

if (list.length > 400) {

list = this.data[0].children

}

return list.filter(item => item[this.treeProps.idKey]).map(item => item[this.treeProps.idKey])

},

},

watch: {

searchInput(val) {

//if(val){

this.$refs.usertree.filter(val);

//}

},

props: {

immediate: true,

handler(obj) {

this.treeProps = {...this.treeProps, ...obj}

}

},

data(val) {

this.loading = false

},

},

methods: {

// handleNodeClick(nodeInfo) {

// Bus.$emit('nodeInfo', nodeInfo);

// this.$emit('refreshData',nodeInfo);

// },

filterNode(val, data) {

if (!val) return true;

return [data[this.treeProps.label], data.py || '', data.pinyin || ''].some(item => item.indexOf(val) !== -1)

},

currentChange(data,node) {

let vm = this

if(this.btnDisable && this.hasModify ){//

MessageBox.confirm('修改的内容未保存, 是否继续切换?', '提示', {

confirmButtonText: '确定',

cancelButtonText: '取消',

type: 'warning'

}).then(() => {

vm.refresh(data)

}).catch(() => {

vm.$refs.usertree.setCurrentKey(vm.oldKey)

});

}else{

this.refresh(data)

}

},

refresh(data){

this.oldKey = data.chr_id

Bus.$emit('nodeInfo', data);

this.$emit('refreshData',data);

},

}

}

@import "../../common/styles/variables";

.el-tree{

background-color: transparent

}

.padding-gutter{

padding-top: $gutter ;

padding-bottom: $gutter ;

padding-left: $gutter ;

/*padding: $gutter 0 px;*/

}

.border-grey{

border: 1px #ccc solid;

}

.el-button+.el-button {

margin-left: 0px;

}

.el-input--mini .el-input__inner{

height: 28px !important;

}

.relative{

position: relative;

}

.zhezhao{

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

z-index: 1;

width: 21%;

}

.display-none{

display: none;

}

.display-block{

display: none;

}

=================================

1.效果图

通过在input框里输入值，动态查询树节点。将父节点展开，找到的节点显示在最当前窗口。

2.代码

2.1 html

快速查询 :

style=" width: calc(100% - 210px);height: 28px !important;line-height: 28px !important;"

placeholder="请查找输入内容"

v-model="searchInput"

@keyup.native="search">//按键结束就触发，下面的查找按钮其实可以删除

查找

下一个

id="searchtree-eletree" //id便于定位

style="height: calc(100% - 46px); overflow: auto;" class="border-grey">

node-key="id"

ref="tree"

:highlight-current="true"

expand-on-click-node

:props="defaultProps"

:default-expanded-keys="defaultEexpandedkeys" // 展开节点

>

2.2 js

export default {

data() {

return {

//树

searchTreeData:[],

defaultEexpandedkeys: [0], //默认展开一级树节点

defaultProps: {

children: 'children',

label: 'name'

},

//查询栏

searchInput: '',

searchIndex: null,

searchData: [],

};

},

watch: {

// 搜索框中内容变化，重置当前搜索结果的索引值

searchInput: function () {

this.searchIndex = null

},

},

methods: {

//查询

search() {

this.searchIndex = null;

if (this.searchInput) {

let searchInput = this.searchInput;

this.searchData = this.searchTreeData.filter( function(item) {

return item.name.indexOf(searchInput) > -1 //返回符合查询条件的节点

});

if (this.searchData.length) {//存在符合查询条件的节点

this.searchIndex = 0;

//展开符合条件节点的父节点(使查询节点显示出来)

this.defaultEexpandedkeys = getParentsId(this.searchData[0], this.searchTreeData, 'id','pId', 0);

this.$nextTick(() => {//显示完成后执行

this.$refs.tree.setCurrentKey(this.searchData[0].id);//高亮查询到的第一个节点

setTimeout(() => {

//根据树id 找到高亮的节

let node = document.querySelector('#searchtree-eletree .is-current');点

if (node) {

setTimeout(() => {

// node.scrollIntoView(); //有bug，可尝试

let top = $(node).position().top;

//关键代码，将选中节点显示在当前窗口可视区域

$("#searchtree-eletree").scrollTop(top);

}, 500);

}

}, 0);

});

} else {

//Message需要引入 import {Message} from 'element-ui'

Message.info('未找到任何匹配数据！');

}

} else {

Message.info('请输入要查找的内容！');

}

},

next(){

if (this.searchIndex !== null) {

this.searchIndex += 1;

this.searchIndex = this.searchIndex < this.searchData.length ? this.searchIndex : 0;

this.defaultEexpandedkeys = getParentsId(this.searchData[this.searchIndex], this.searchTreeData, 'id','pId', 0);

this.$nextTick(() => {

this.$refs.tree.setCurrentKey(this.searchData[this.searchIndex].id);

setTimeout(() => {

let node = document.querySelector('#searchtree-eletree .is-current');

if (node) {

setTimeout(() => {

// node.scrollIntoView();

let top = $(node).position().top;

$("#searchtree-eletree").scrollTop(top);

}, 500);

}

}, 0);

});

} else {

if (this.searchInput) {

this.search();

} else {

Message.info('请输入要查找的内容！');

}

}

},

}

}

2.3 在2.2 用到的获取父节点id的方法

/**

* 找到当前节点的所有祖先节点的idKey

* @param {Object} node 当前节点信息

* @param {Array} data 所有节点的数据信息

* @returns {Array} parentsId 祖先节点的idKey

*/

export function getParentsId(node, data = [], idKey='id', pIdKey='pid', rootId = '0', parentsId = [] ){

if(!node) return [rootId, ...parentsId];

if(node[pIdKey] == rootId) return [node[pIdKey], ...parentsId];

let pNode = data.filter(item => item[idKey] == node[pIdKey]);

if(!pNode.length) return parentsId;

parentsId.push(pNode[0][idKey]);

return getParentsId(pNode[0], data, idKey, pIdKey, rootId, parentsId);

};