javascript vue.js 前端 element tree组件current-node-key 失效或者setCurrentKey失效问题解决方案

element tree组件current-node-key 失效或者setCurrentKey失效问题解决方案

在使用element-ui el-tree 组件时遇到设置默认高亮属性或方法不生效的问题，现在将解决方案贴出来：

首先先看html代码：

:props="props"

:data="data"

node-key="id"

@node-click="handleNodeClick"

ref="treeSelect"

:highlight-current="true"

:current-node-key="currentKey"

:expand-on-click-node="false">

{{ node.label }}

首先保证设置 node-key 属性为数据中的唯一值，可以是id，也可以是其他。设置ref=“treeSelect”。设置 :highlight-current=“true” 此属性表示设置选中项为高亮样式。

然后在data里配置

import { translateDataToTree } from '@/utils/utils'

data () {

return {

data:[],

currentKey: '',

props: {

label: 'name', // 节点文本字段key

children: 'children'

}

}

}

在js里动态设置默认选中项

this.data = translateDataToTree(接口返回数据).treeData //treeData是接口返回的数据

this.currentKey = 'defaultId' // 默认选中id值

this.$nextTick(() => {

this.$refs['treeSelect'].setCurrentKey(this.currentKey)

})

setCurrentKey方法放在$nextTick里使用。

当后端返回数据是一维数组，怎么转化成父子嵌套结构方法：

utils/utils.js:

/** 以下三个key名，以实际接口数据为准

* department_id 当前节点id字段名

* children 当前节点的子元素集合字段名

* parent_id 当前节点父id字段名

*/

export const translateDataToTree =(data) =>{

data = JSON.parse(JSON.stringify(data))

// 删除所有 children,以防止多次调用

data.forEach(function (item) {

delete item.children;

});

let map = {}; // 构建map

data.forEach(i => {

map[i.department_id] = i; // 构建以id为键 当前数据为值

});

let treeData = [];

data.forEach(child => {

const mapItem = map[child.parent_id]; // 判断当前数据的parentId是否存在map中

if (mapItem) { // 存在则表示当前数据不是最顶层数据

// 注意: 这里的map中的数据是引用了arr的它的指向还是arr，当mapItem改变时arr也会改变,踩坑点

// 这里判断mapItem中是否存在children, 存在则插入当前数据, 不存在则赋值children为[]然后再插入当前数据

(mapItem.children || ( mapItem.children = [] )).push(child)

} else { // 不存在则是组顶层数据

treeData.push(child);

}

});

return {

treeData: treeData,

};

}

推荐阅读