树结构自定义内容（例如：只有部门下的员工可以勾选）

一：自定义图标和多选框

<template>   
    <el-tree
      ref="staffTreeRef"
      check-strictly
      :data="staffData"
      :default-checked-keys="checkedData"
      default-expand-all
      node-key="pid"
      popper-class="el_tree_select"
      :props="{
        children: 'children',
        label: 'deptName',
        class: customNodeClass,
        disabled: 'selectable',
      }"
      show-checkbox
      @check="handleNodeClick"
     />
</template>
<script>
  const staffData = ref([
    {
      pid: 0,
      deptName: '销售部',
      spread: false,
      children: [
        {
          pid: 01,
          deptName: '销售一部',
          spread: false,
          children: [
            {
              pid: 0101,
              deptName: '123',
              spread: false,
            },
            {
              pid: 0102,
              deptName: 'pc新增员工',
              spread: true,
            },
            {
              pid: 0103,
              deptName: '测试',
              spread: true,
            },
            {
              pid: 0104,
              deptName: '测试',
              spread: true,
            },
            {
              pid: 0105,
              deptName: '张凉凉',
              spread: true,
            },
            {
              pid: 0106,
              deptName: '2',
              spread: true,
            },
          ],
        },
      ],
    },
  ])
 // 只有员工展示复选框与前面加图标
  const customNodeClass = (data) => {
    if (!data.spread) {
      return 'is-spread'
    }
    return null
  }
</script>
<style lang="scss" scoped>
  :deep(.el-checkbox) {
    position: absolute;
    right: 10px;
    opacity: 0;
  }
  :deep(.is-spread .el-checkbox) {
    opacity: 1;
  }

  :deep(.is-spread .el-tree-node__expand-icon.is-leaf::before) {
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    content: '';
    background: url('https://oss.sxcszl.com/enterprise/static/image/default_user.png')
      no-repeat 0 0;
    background-size: 16px;
  }
</style>

标注：popper-class：自定义节点类名

  

功能采用给符合的节点添加class类名，通过css样式实现。

二：自定义内容

1. 如果想自定义树结构的显示内容，可以使用template方法