Element el-tree el-select 树形下拉框
1 <div id="app"> 2 <el-select v-model="form.Id" placeholder="请选择" ref="selectTree"> 3 <el-option :key="form.Id" :value="form.Id" :label="form.label" hidden> 4 </el-option> 5 <el-tree :data="datalist" :props="defaultProps" @node-click="handleClickNode" node-key="id"></el-tree> 6 </el-select> 7 </div> 8 9 <script> 10 //主要内容 11 var app = new Vue({ 12 el: "#app", 13 data() { 14 return { 15 datalist: [{ 16 Id: 1, 17 label: '一级 1', 18 children: [{ 19 Id: 11, 20 label: '二级 1-1', 21 children: [{ 22 Id: 111, 23 label: '三级 1-1-1' 24 }] 25 }] 26 }, { 27 Id: 2, 28 label: '一级 2', 29 children: [{ 30 Id: 21, 31 label: '二级 2-1', 32 children: [{ 33 Id: 211, 34 label: '三级 2-1-1' 35 }] 36 }, { 37 Id: 22, 38 label: '二级 2-2', 39 children: [{ 40 Id: 221, 41 label: '三级 2-2-1' 42 }] 43 }] 44 }], 45 defaultProps: { 46 /** 唯一标识 **/ 47 value: 'Id', 48 /** 标签显示 **/ 49 label: 'label', 50 /** 子级 **/ 51 children: 'children' 52 }, 53 /* 注:如果想要展示的data是后端传来的树结构,把data改为res赋值对象 */ 54 form: { 55 Id: "1", 56 label: "一级 1" 57 } 58 } 59 }, 60 61 methods: { 62 //节点点击事件 63 handleClickNode(data) { 64 this.form.Id = data.Id 65 this.form.label = data.label 66 // 选择器执行完成后,使其失去焦点隐藏下拉框的效果 67 this.$refs.selectTree.blur(); 68 // this.$refs[`${data.id}tree`][index].blur(); // 选择器执行完成后,使其失去焦点隐藏下拉框的效果 69 }, 70 } 71 }); 72 </script>