elementUI中el-tree组件默认选中树节点效果（单选）

一、代码实现

1. 属性了解 （更多）

1. node-key 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 String
2. current-node-key 当前选中的节点 string, number
3. expand-on-click-node 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 boolean — true
4. default-expand-all 是否默认展开所有节点 boolean — false
5. highlight-current 是否高亮当前选中节点，默认值是 false。 boolean — false
6. check-on-click-node 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。 boolean — false

2. 实现步骤

1. 设置一个固定值 node-key=“id”, 根据实际项目配置唯一的标记
2. 定义当前选中节点 :current-node-key=“currentDeptId”

3.代码示例

  
          
              {{ node.label }} 
          
   

   // 部门树选项
    deptOptions: undefined,
  // 配置选项
    defaultProps: {
        children: "children",
        label: "label",
    },
     //默认选中的部门
     currentDeptId: null,   // 比如：107
     currentDeptName: null, 
	  methods: {
	      // 节点单击事件
	      handleNodeClick(data) {
	          console.log(data, '节点单击事件')
	          this.currentDeptId = data.id
	          this.currentDeptName = data.label
	      },
	     }

二、 效果图