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

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

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

首先先看html代码：

<el-tree:props="props":data="data"node-key="id"@node-click="handleNodeClick"ref="treeSelect":highlight-current="true":current-node-key="currentKey":expand-on-click-node="false"><spanclass="custom-tree-node"slot-scope="{ node }"><spanclass="customSapn":title="node.label">{{ node.label }}</span></span></el-tree>

• 首先保证设置 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字段名
*/exportconsttranslateDataToTree=(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,};}