el-tree左侧树插件

适用场景：左右布局，左侧树图，右侧内容，点击树节点展示相应内容

1.树节点单选

2.一级节点可展开收起无法被选中

3.二级节点被选中展示相应页面

<template>
  <div>
    <el-tree 
      ref="treeRef"
      :indent="0"
      :data="treeData" 
      :props="defaultProps"
      :default-checked-keys="defaultCheckedKes"
      default-expand-all
      check-on-click-node
      check-strictly
      node-key="id"
      show-checkbox
      @check-change="handleCheckChange">
      <span class="custom-tree-node" slot-scope="{ node }">
        <span v-if="node.level != 1" class="iconfont"> 
          <i class="el-icon-document"></i>
        </span>
        <span v-else-if="node.expanded" class="iconfont"> 
          <i class="el-icon-folder-opened"></i>
        </span>
        <span v-else class="iconfont">
          <i class="el-icon-folder"></i>
        </span> 
        <span>{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: 'leftTree',
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    defaultCheckedKes: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      checkedId: [] // 新增当前选中ID存储
    }
  },
  watch: {
    defaultCheckedKes: {
      handler: function(nval) {
        this.checkedId = nval[0]
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleCheckChange(data, checked) {
      if(data.children && data.children.length > 0) {
        this.$refs['treeRef'].setCheckedKeys([this.checkedId])
      } else  {
        if(checked) {
          this.checkedId = data.id
          this.$emit('changeForm', data.id)
          this.$refs['treeRef'].setCheckedKeys([data.id])
        } else if(this.checkedId === data.id) {
          this.$refs['treeRef'].setCheckedKeys([data.id])
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tree {
  background: transparent;
  // 复选框样式改变
  .el-checkbox__inner {
    border-radius: 50%;
  }
  // 一级节点不展示复选框
  .is-leaf + .el-checkbox{
    display: inline-block;
  }
  .el-checkbox{
    display: none;
  }
}
</style>

// 示例数据
treeData: [{
        id: '1',
        label: '一级 1',
        children: [{
          id: '1-1',
          label: '一级1-1',
          children: []
        },{
          id: '1-2',
          label: '一级1-2'
        }]
      }, {
        id: '2',
        label: '二级 2',
        children: [{
          id: '2-1',
          label: '二级 2-1',
        },{
          id: '2-2',
          label: '二级 2-2'
        }, {
          id: '2-3',
          label: '二级 2-3',
        }]
      }