2020-08-28 2020让你的ElementUI el-s

操让我们更加有经验，这里做了一个elementUI eleselect+tree的下拉组件
功能实现完成，但是有点不完美，选中后无法关闭下拉框

这个是重点 加了一行代码

this.$refs.selectblur.blur();

页面引用

<SelectTree
            :props="props"
            :options="optionData"
            :clearable="isClearable"
            :accordion="isAccordion"
            :value="valueId"
            @getValue="getValue($event)"
          />

import SelectTree from "./components/treeSelect";


export default {
  components: {
    SelectTree
  },
  data() {
    return {
      privilegeList: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1"
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2"
            }
          ]
        }
      ],
      isClearable: true, // 可清空（可选）
      isAccordion: true, // 可收起（可选）
      valueId: "",
      props: {
        // 配置项（必选）
        value: "id",
        label: "name",
        children: "children"
        // disabled:true
      }
    };
  },
computed: {
    /* 转树形数据 */
    optionData() {
    //这里如果是后台返回的树形结构可直接引用 不用转换
      let cloneData = JSON.parse(JSON.stringify(this.privilegeList)); // 对源数据深度克隆
      return cloneData.filter(father => {
        // 循环所有项，并添加children属性
        let branchArr = cloneData.filter(child => father.id == child.parentId); // 返回每一项的子级数组
        branchArr.length > 0 ? (father.children = branchArr) : ""; //给父级添加一个children属性，并赋值
        return father.parentId == 0; //返回第一层
      });
      return cloneData;
    }
  },
  methods: {
    getValue(value) {
      console.log(value);
    }
  }
};

下面是组件 可以直接用

<template>
<el-select
:value="valueTitle"
:clearable="clearable"
class="maxwidth"
@clear="clearHandle"
ref="selectblur"

<el-option :value="valueTitle" :label="valueTitle" class="options">
  <el-tree
    id="tree-option"
    ref="selectTree"
    :accordion="accordion"
    :data="options"
    :props="props"
    :node-key="props.value"
    :default-expanded-keys="defaultExpandedKey"
    :expand-on-click-node="false"
    @node-click="handleNodeClick"
  />
</el-option>

</el-select>
</template>

<script>
export default {
name: "ElTreeSelect",
props: {
// 配置项
props: {
type: Object,
default: () => ({
value: "id", // ID字段名
label: "title", // 显示名称
children: "children" // 子级字段名
})
},

// 选项列表数据(树形结构的对象数组)
options: { type: Array, default: () => [] },

// 初始值
value: { type: String, default: null },

// 可清空选项
clearable: { type: Boolean, default: true },

// 自动收起
accordion: { type: Boolean, default: false }

},
data() {
return {
valueId: null,
valueTitle: "",
defaultExpandedKey: []
};
},

watch: {
value() {
this.valueId = "";
this.valueTitle = "";
this.valueId = this.value;
this.initHandle();
}
},
mounted() {
this.valueId = this.value; // 初始值
this.initHandle();
},
methods: {
// 初始化值
initHandle() {
if (this.valueId) {
this.valueTitle = this.refs.selectTree.setCurrentKey(this.valueId); // 设置默认选中
this.defaultExpandedKey = [this.valueId]; // 设置默认展开
}
this.initScroll();
},

// 初始化滚动条
initScroll() {
  this.$nextTick(() => {
    const scrollWrap = document.querySelectorAll(
      ".el-scrollbar .el-select-dropdown__wrap"
    )[0];
    const scrollBar = document.querySelectorAll(
      ".el-scrollbar .el-scrollbar__bar"
    );
    scrollWrap.style.cssText =
      "margin: 0px; max-height: none; overflow: hidden;";
    scrollBar.forEach(ele => (ele.style.width = 0));
  });
},

// 切换选项
handleNodeClick(node) {
  this.$refs.selectblur.blur();//让下拉框失去焦点事件
  this.valueTitle = node[this.props.label];
  this.valueId = node[this.props.value];
  this.$emit("getValue", this.valueId);
  this.defaultExpandedKey = [];
},

// 清除选中
clearHandle() {
  this.valueTitle = "";
  this.valueId = null;
  this.defaultExpandedKey = [];
  this.clearSelected();
  this.$emit("getValue", null);
},

// 清空选中样式
clearSelected() {
  const allNode = document.querySelectorAll("#tree-option .el-tree-node");
  allNode.forEach(element => element.classList.remove("is-current"));
}

}
};
</script>

<style scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
height: auto;
max-height: 274px;
padding: 0;
overflow: hidden;
overflow-y: auto;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
ul li >>> .el-tree .el-tree-node__content {
height: auto;
padding: 0 20px;
}
.el-tree-node__label {
font-weight: normal;
}
.el-tree >>> .is-current .el-tree-node__label {
color: #409eff;
font-weight: 700;
}
.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
color: #606266;
font-weight: normal;
}
.maxwidth {
width: 100%;
}
</style>

https://www.jianshu.com/p/61119b7c6f14