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

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

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

1. <el-tree
2.     :props="props"
3.     :data="data"
4.     node-key="id"
5.     @node-click="handleNodeClick"
6.     ref="treeSelect"
7.     :highlight-current="true"
8.     :current-node-key="currentKey"
9.     :expand-on-click-node="false">
10.     <span class="custom-tree-node" slot-scope="{ node }">
11.       <span class="customSapn" :title="node.label">{{ node.label }}</span>
12.     </span>
13. </el-tree>

复制代码

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

然后在data里配置

1. import { translateDataToTree } from '@/utils/utils'
2. data () {
3.     return {
4.         data:[],
5.         currentKey: '',
6.         props: {
7.             label: 'name', // 节点文本字段key
8.             children: 'children'
9.         }   
10.     }
11. }

复制代码

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

1. this.data = translateDataToTree(接口返回数据).treeData //treeData是接口返回的数据
2. this.currentKey = 'defaultId' // 默认选中id值
3. this.$nextTick(() => {
4.     this.$refs['treeSelect'].setCurrentKey(this.currentKey)
5. })

复制代码

setCurrentKey方法放在$nextTick里使用。
当后端返回数据是一维数组，怎么转化成父子嵌套结构方法：

1. utils/utils.js:
2. /** 以下三个key名，以实际接口数据为准
3. * department_id  当前节点id字段名
4. * children       当前节点的子元素集合字段名
5. * parent_id      当前节点父id字段名
6. */
7. export const translateDataToTree =(data) =>{
8.     data = JSON.parse(JSON.stringify(data))
9.     // 删除所有 children,以防止多次调用
10.     data.forEach(function (item) {
11.       delete item.children;
12.     });
13.     let map = {}; // 构建map
14.     data.forEach(i => {
15.       map[i.department_id] = i; // 构建以id为键 当前数据为值
16.     });
17.     let treeData = [];
18.     data.forEach(child => {
19.         const mapItem = map[child.parent_id]; // 判断当前数据的parentId是否存在map中
20.         if (mapItem) { // 存在则表示当前数据不是最顶层数据
21.             // 注意: 这里的map中的数据是引用了arr的它的指向还是arr，当mapItem改变时arr也会改变,踩坑点
22.             // 这里判断mapItem中是否存在children, 存在则插入当前数据, 不存在则赋值children为[]然后再插入当前数据
23.             (mapItem.children || ( mapItem.children = [] )).push(child)
24.         } else { // 不存在则是组顶层数据
25.             treeData.push(child);
26.         }
27.     });
28.     return {
29.       treeData: treeData,
30.     };
31. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。