el-select 结合el-tree树形结构下拉框的封装使用

树结构单选效果图

 

树结构多选效果图

 

 

 封装的代码.vue文件 子组件

<template>
  <el-select
    ref="selectTree"
    v-model="value"
    :placeholder="placeholder"
    clearable
    @clear="clearValue"
    @remove-tag="removeTag"
    style="width:100%"
    :disabled="disabled"
    :multiple="multiple"
    :collapse-tags="collapsTags"
  >
    <el-option :value="values" hidden />
    <el-tree
      ref="treeOption"
      highlight-current
      accordion
      :node-key="defaultProps.value"
      :default-expanded-keys="defaultExpandedKeys"
      :data="options"
      :props="defaultProps"
      @check="checkNode"
      @node-click="checkNode"
      :show-checkbox="multiple"
    />
  </el-select>
</template>

<script>
export default {
  name: "CompleteTreeSelect",
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: () => {
        return "请选择";
      }
    },
    collapsTags: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    showCheckBox: {
      type: Boolean,
      default: false
    },
    // 影响绑定的数据
    EObjArr: {
      type: Array,
      default: () => []
    },
    // 节点数据
    options: {
      type: Array, // 必须是树形结构的对象数组
      default: () => {
        return [];
      }
    },
    // 设置lable value属性
    defaultProps: {
      type: Object,
      default: () => {
        return {
          parentValue: "parentValue", //上级字段value值，用于给多选时默认展开defaultExpandedKeys
          value: "value", // ID字段名
          label: "label", // 显示名称
          children: "children" // 子级字段名
        };
      }
    },
    // 默认勾选的节点
    defaultCheckNodes: {
      type: Array, // 已经分配的资源
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      value: "",
      values: [],
      currentNodeKey: "",
      defaultcheckedKeys: [],
      defaultExpandedKeys: []
    };
  },
  watch: {
    EObjArr(val) {
      if (this.multiple) {
        this.value = [];
        val.forEach(item => {
          this.value.push(item[this.defaultProps.label]);
          this.values.push(item);
          this.defaultcheckedKeys.push(item[this.defaultProps.value]);
          this.defaultExpandedKeys.push(item[this.defaultProps.parentValue]);
          this.$nextTick(() => {
            this.$refs.treeOption.setChecked(
              item[this.defaultProps.value],
              true,
              false
            );
          });
        });
      } else {
        this.value = val[0][this.defaultProps.label];
        this.values = val[0];
        this.defaultExpandedKeys.push(
          this.EObjArr[0][this.defaultProps.parentValue]
        );
        this.$nextTick(() => {
          // this.currentNodeKey = this.EObjArr[0][this.defaultProps.value];
          this.$refs.treeOption.setCurrentNode(this.EObjArr[0]);
          // this.$refs.treeOption.setCurrentKey(this.currentNodeKey);
        });
      }
    }
  },
  methods: {
    init() {
      this.$nextTick(() => {
        this.defaultExpandedKeys = [];
        if (this.EObjArr && this.EObjArr.length) {
          if (this.multiple) {
            // 多选功能
            this.EObjArr.forEach(item => {
              this.value.push(item[this.defaultProps.label]);
              this.values.push(item);
              this.defaultcheckedKeys.push(item[this.defaultProps.value]);
              this.defaultExpandedKeys.push(
                item[this.defaultProps.parentValue]
              );
              this.$nextTick(() => {
                this.$refs.treeOption.setChecked(
                  item[this.defaultProps.value],
                  true,
                  false
                );
                // this.$refs.treeOption.setCheckedNodes(this.values);
                // this.$refs.treeOption.setCheckedKeys(this.defaultcheckedKeys);
              });
            });
          } else {
            // 单选功能
            this.value = this.EObjArr[0][this.defaultProps.label];
            this.values = this.EObjArr[0];
            this.defaultExpandedKeys.push(
              this.EObjArr[0][this.defaultProps.parentValue]
            );
            this.$nextTick(() => {
              // this.currentNodeKey = this.EObjArr[0][this.defaultProps.value];
              this.$refs.treeOption.setCurrentNode(this.EObjArr[0]);
              // this.$refs.treeOption.setCurrentKey(this.currentNodeKey);
            });
          }
        } else {
          this.defaultExpandedKeys.push(
            this.options[0][this.defaultProps.value]
          );
          this.value = "";
        }
      });
    },
    clearValue() {
      this.value = "";
      this.$refs.treeOption.setCurrentKey(null);
      this.$emit("input", []);
    },
    // 删除tag时，
    removeTag(val) {
      // 取消勾选
      for (var i = 0; i < this.values.length; i++) {
        if (this.values[i][this.defaultProps.label] == val) {
          this.$refs.treeOption.setChecked(
            this.values[i][this.defaultProps.value],
            false,
            false
          );
          this.values.splice(i, 1);
          // 重新给控件赋值
          this.$emit("input", this.values, this.value);
        }
      }
    },
    // 勾选节点，
    checkNode(node, checkedNodes) {
      if (this.multiple) {
        // 可勾选
        if (checkedNodes && checkedNodes.checkedNodes) {
          this.value = [];
          this.values = [];
          checkedNodes.checkedNodes.forEach(item => {
            if (item.children == null) {
              this.value.push(item[this.defaultProps.label]);
              this.values.push(item);
            }
          });
          this.$emit("input", this.values, this.value);
        }
      } else {
        // 单选
        if (node.children == null) {
          this.value = node[this.defaultProps.label];
          this.values = node;
          this.$refs.selectTree.blur();
          this.$emit("input", node, this.value);
        }
      }
    }
  }
};
</script>

<style scoped>
/* 去除tree上面的一行高度 */
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  padding: 0;
}
</style>

父组件使用（:multiple="true"多选，:multiple="false"即为单选）

<template>
  <div>
    <el-row>
      <el-col :span="8">
        <select-tree
          ref="seltree2"
          :options="friendsOptions"
          :defaultProps="defaultProps"
          @input="selTreeChange"
          :multiple="true"
          :EObjArr="EObjArr"
        >
        </select-tree>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import SelectTree from "@/components/selectTreeObj.vue";
export default {
  data() {
    return {
      defaultProps: {
        value: "orgGuid",
        label: "displayName",
        children: "children",
        parentValue: "parentGuid"
      },
      friendsOptions: [
        {
          orgGuid: "a999b911-c1ec-9a42-4dac-ba8927407e03",
          parentGuid: "bba02f17-b961-4f89-9b87-b2fbb0067268",
          parentName: null,
          displayName: "总机构",
          children: [
            {
              orgGuid: "215bbbfe-fda2-a772-4cb5-2d6ec36511d4",
              parentGuid: "a999b911-c1ec-9a42-4dac-ba8927407e03",
              parentName: "总机构",
              displayName: "机构一",
              children: [
                {
                  orgGuid: "2931990",
                  parentGuid: "215bbbfe-fda2-a772-4cb5-2d6ec36511d4",
                  parentName: "机构一",
                  displayName: "王某某"
                },
                {
                  orgGuid: "2902870",
                  parentGuid: "215bbbfe-fda2-a772-4cb5-2d6ec36511d4",
                  parentName: "机构一",
                  displayName: "缪某某"
                },
                {
                  orgGuid: "2933620",
                  parentGuid: "215bbbfe-fda2-a772-4cb5-2d6ec36511d4",
                  parentName: "机构一",
                  displayName: "沈某某"
                },
              ]
            },
            {
              orgGuid: "78cda62c-f515-b53c-4f6a-87e7534921b1",
              parentGuid: "a999b911-c1ec-9a42-4dac-ba8927407e03",
              parentName: null,
              displayName: "机构二",
              children: [
                {
                  orgGuid: "2933660",
                  parentGuid: "78cda62c-f515-b53c-4f6a-87e7534921b1",
                  parentName: "机构二",
                  displayName: "金某某"
                },
                {
                  orgGuid: "2933810",
                  parentGuid: "78cda62c-f515-b53c-4f6a-87e7534921b1",
                  parentName: "机构二",
                  displayName: "胡某某"
                },
              ]
            },
            {
              orgGuid: "56626745-a5a9-b16d-43ab-8d03bef9241b",
              parentGuid: "a999b911-c1ec-9a42-4dac-ba8927407e03",
              parentName: null,
              displayName: "机构三",
              children: [
                {
                  orgGuid: "94db4d4b-71b3-b0ac-4db4-ad09b9ead683",
                  parentGuid: "56626745-a5a9-b16d-43ab-8d03bef9241b",
                  parentName: null,
                  displayName: "组织一",
                  children: [
                    {
                      orgGuid: "2933980",
                      parentGuid: "94db4d4b-71b3-b0ac-4db4-ad09b9ead683",
                      parentName: "组织一",
                      displayName: "周某某"
                    },
                    {
                      orgGuid: "2933950",
                      parentGuid: "94db4d4b-71b3-b0ac-4db4-ad09b9ead683",
                      parentName: "组织一",
                      displayName: "张某某"
                    },
                  ]
                },
                {
                  orgGuid: "721373f2-ec4b-9c88-45e5-fbb9c3fc034f",
                  parentGuid: "56626745-a5a9-b16d-43ab-8d03bef9241b",
                  parentName: null,
                  displayName: "组织二",
                  children: [
                    {
                      orgGuid: "2933960",
                      parentGuid: "721373f2-ec4b-9c88-45e5-fbb9c3fc034f",
                      parentName: "组织二",
                      displayName: "陈某某"
                    },
                    {
                      orgGuid: "2933970",
                      parentGuid: "721373f2-ec4b-9c88-45e5-fbb9c3fc034f",
                      parentName: "组织二",
                      displayName: "郑某某"
                    }
                  ]
                },
                {
                  orgGuid: "2933950",
                  parentGuid: "56626745-a5a9-b16d-43ab-8d03bef9241b",
                  parentName: "机构三",
                  displayName: "张某某"
                },
                {
                  orgGuid: "2933960",
                  parentGuid: "56626745-a5a9-b16d-43ab-8d03bef9241b",
                  parentName: "机构三",
                  displayName: "陈某某"
                },
              ]
            }
          ]
        }
      ],
      EObjArr: [
        {
          children: null,
          displayName: "王某某",
          orgGuid: "2931990",
          parentGuid: "215bbbfe-fda2-a772-4cb5-2d6ec36511d4",
          parentName: "机构一"
        },
        {
          children: null,
          displayName: "金某某",
          orgGuid: "2933660",
          parentGuid: "78cda62c-f515-b53c-4f6a-87e7534921b1",
          parentName: "机构二"
        }
      ],
    };
  },
  components: { SelectTree },
  mounted() {
    this.$refs.seltree2.init();//子组件初始化，给予其默认值
  },
  methods: {
    selTreeChange(node, val) {
      console.log(val, node);
    }
  }
};
</script>