部门或者人员等层级Tree

前端工作中经常遇到需要多层级选择的场景，有时候单选有时候多选，有的需要联动有的又不需要，有的需要置灰不可选，等等场景太多，看着头疼///

业务场景：

1)部门多选且父子部门不联动场景，效果如下：

2）人员选择--只能单选 部门显示book图标 人员显示user图标，效果如下：

解决方案：使用treeselect，话不多说上代码

使用方法：

1、安装：

npm install --save @riophae/vue-treeselect

2、使用

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "Treepage",
  components: { 
    Treeselect
  },
    data() {
        return {
            // 表单参数
          form: {
            deptIds: [],//所在部门
             // 多选部门树选项
            deptOptions: [],
            superior:null,//单选 直属上级id
            superiorName:'',//直属上级名字
          }
        }
    },
    mounted() {
        this.getTreeselect();// 获取部门列表
    },
    methods: {
        /** 查询部门下拉树结构 */
        async getTreeselect(){
          let data = await treeselect(this.queryParams);
          if (data.code === SUCCESSCODE) {
            this.deptOptions = data.data;//接口获取部门tree
          }
        },
        /** 转换部门数据结构 */
        normalizer(node) {
          return {
            id: node.id,
            label: node.label,
          }
        },
        /** 查询部门下拉树结构 */
    async getdeptUserTreeselect(){
      let data = await deptUserTreeselect();
      if (data.code === SUCCESSCODE) {
        this.superiorOptions = data.data;//接口获取 直属上级tree列表
      }
    },
    // 直属上级列表处理
    superior_normalizer(node) {
      if ((node.children && !node.children.length) || node.children === null) {
        delete node.children;
      }
      //isDisabled 类型node.type是部门且部门下没有员工则置灰不可选
      return {
        id: node.id,
        label: node.label,
        isDisabled: node.type === 1 && (!node.children || node.children === null) ? true : false,
        children: node.children,
      }
    },
    //选中人员的时候拿到上级ID和名字
    superiorTreeSelectChange(raw){
      this.form.superior = raw.id;
      this.form.superiorName = raw.label;
    },
    }
    
}

<el-form ref="form" :model="form" :rules="rules" label-width="130px">
    <!-- 部门多选 -->
    <el-row class="dept-con">
        <el-col :span="12">
          <el-form-item label="部门" prop="deptIds">
            <treeselect 
              :multiple="true"
              :append-to-body="true"
              v-model="form.deptIds" 
              :options="deptOptions" 
              :normalizer="normalizer"
              :show-count="true"  
              noOptionsText="暂无数据" 
              noResultsText="未找到数据" 
              placeholder="请选择部门"
              :flat="true"
              :auto-deselect-descendants="false"
              :auto-select-descendants="false"
              search-nested
            >
              <label
                slot="option-label"
                slot-scope="{ node, shouldShowCount, labelClassName, countClassName }"
                :class="labelClassName"
              >
                <slot name="diy-option" v-bind="{ node, shouldShowCount, countClassName }">
                  <img src="@/assets/images/book.png" style="width:15px; height:15px;"/>
                  {{ node.label }}
                  <span v-if="shouldShowCount" :class="countClassName">({{ node.children.length }})</span>
                </slot>
              </label>
            </treeselect>
            <!-- 组件说明 设置父子不联动选择
            :flat="true" //设置平面模式（选中的标签不联动子节点和父节点）
            :auto-deselect-descendants="false" //取消节点时，取消其接点的子节点（仅可在平面模式下使用）
            :auto-select-descendants="true" //选择节点时，取消其接点的子节点（仅可在平面模式下使用）
            :disable-branch-nodes="true" //设置只能选择子节点
          -->
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 人员单选 -->
       <el-row>
        <el-col :span="12">
          <el-form-item label="直属上级" prop="superior">
            <treeselect v-model="form.superior"
              :append-to-body="true"
              :options="superiorOptions" 
              noOptionsText="暂无数据" 
              noResultsText="未找到数据" 
              :show-count="true" 
              placeholder="请选择直属上级" 
              search-nested
              :flat="true"
              :disable-branch-nodes="true"
              :normalizer="superior_normalizer"
              @select="superiorTreeSelectChange"
            >
            <label
                slot="option-label"
                slot-scope="{ node, shouldShowCount, labelClassName, countClassName }"
                :class="labelClassName"
              >
                <slot name="diy-option" v-bind="{ node, shouldShowCount, countClassName }">
                  <img v-if="node.raw.type == 1" src="@/assets/images/book.png" style="width:15px; height:15px;"/>
                  <img v-else src="@/assets/images/people.png" style="width:15px; height:15px;"/>
                  {{ node.label }}
                  <span v-if="shouldShowCount" :class="countClassName">({{ node.children.length }})</span>
                </slot>
              </label>
            </treeselect>
          </el-form-item>
        </el-col>
      </el-row>
</el-form>

 结语：

以上就是所有代码啦，感谢看到了这里，希望对你有所帮助，拜拜~