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">    <span class="custom-tree-node" slot-scope="{ node }">      <span class="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字段名*/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,    };}

点击全文阅读