2020让你的ElementUI el-select 失去焦点 el-select+el-tree下拉组件让选择更多

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

这个是重点 加了一行代码 

this.$refs.selectblur.blur(); 

 页面引用 

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); } } }; 下面是组件 可以直接用

本文章由javascript技术分享原创和收集