elementUI使用记录一：树形控件el-tree设置默认展开和选中样式修改

时间：2025-02-16 19:20:43

项目中有需要从其他地方跳转到某个页面需要设置默认el-tree展开且默认选中某个节点

（默认选中不设置多选框，当前的需求是根据接口获取数据，所以不设置默认值）

使用步骤

一、加载el-tree

按照官方文档的说明在项目中引入组件
template

<el-tree
  :data="treeData"
  node-key="ID"
  :default-expanded-keys="defalutCheckArr"
  :default-checked-keys="defalutCheckArr"
  :props="defaultProps">
</el-tree>

data

   data() {
      return {
       treeData:[],
       defalutCheckArr:[],
        defaultProps: {
          children: 'items',
          label: 'name',
        },
       }
    },

treeData为el-tree的数据，ID为数据的唯一标识，作为展开和选中的key，默认展开和默认选中设置为同一个数组defalutCheckArr，方便传参，根据实际需求来

二、引入数据

methods

   async initTree(boxdata) {
        const data = await getErecTree({ type: 3 })//你的接口
        this.treeData = data//设置el-tree值
        if (boxdata) {
          this.defaultShowArr = [boxdata.boxId]//默认展开对象和选中的值,boxid需要和ID的值对应且唯一
        }
      },

最后调用方法即可

三、完整代码如下

<template>
    <el-tree
      v-loading="treeLoading"
      :data="treeData"
      :default-checked-keys="defalutCheckArr"
      :default-expanded-keys="defalutCheckArr"
      element-loading-spinner="el-icon-loading"
      element-loading-text="拼命加载中"
      node-key="nodeId"
      :props="defaultProps"
    />
 
</template>
<script>
  // 引入接口
  import { getErecTree } from '@/api/'

  export default {
     data() {
      return {
        treeLoading: true,
        treeData: [],
        defaultProps: {
          children: 'items',
          label: 'name',
        },
        defalutCheckArr: [],
      }
    },
    created() {
       this.initTree()
    },
     methods: {
        async initTree(boxdata) {
        const data = await getErecTree({ type: 3 })
        this.treeData = data
        if (boxdata) {
          this.defaultShowArr = [boxdata.boxId]
        }
        this.treeLoading = false
      },
    }
  }
  <style lang="scss">
/* 修改选中样式 */
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content,
.is-checked .el-tree-node__content {
  color: #148ff3;
  font-weight: bold;
}
</style>

相关文章