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,
};
}