在用 elementui 开发项目的时候,在进行下拉选择的时候,由于下拉的选项中,存在‘父’‘子’上下级的关系,所以想用下拉树来解决。
通过百度 elementui 下拉树,有很多版本,但是总会有一些问题。最终自己写了一个,能够完美实现下拉树的功能。
废话少说,上代码:
<template> <div class="app-container"> <el-select class="main-select-tree" ref="selectTree" v-model="value" style=" 560px;"> <el-option v-for="item in formatData(datas)" :key="item.value" :label="item.label" :value="item.value" style="display: none;" /> <el-tree class="main-select-el-tree" ref="selecteltree" :data="datas" node-key="id" highlight-current :props="defaultProps" @node-click="handleNodeClick" :current-node-key="value" :expand-on-click-node="expandOnClickNode" default-expand-all /> </el-select> </div> </template> <script> export default { data() { return { value: 6, expandOnClickNode: true, options:[], datas: [{ id: 1, label: '云南', children: [{ id: 2, label: '昆明', children: [ {id: 3,label: '五华区',children:[{id: 8,label: '北辰小区'}]}, {id: 4,label: '盘龙区'} ] }] }, { id: 5, label: '湖南', children: [ {id: 6,label: '长沙'}, {id: 7,label: '永州'} ] }], defaultProps: { children: 'children', label: 'label' } } }, methods: { // 四级菜单 formatData(data){ let options = []; data.forEach((item,key) => { options.push({label:item.label,value:item.id}); if(item.children){ item.children.forEach((items,keys) => { options.push({label:items.label,value:items.id}); if(items.children){ items.children.forEach((itemss,keyss) => { options.push({label:itemss.label,value:itemss.id}); if(itemss.children){ itemss.children.forEach((itemsss,keysss) => { options.push({label:itemsss.label,value:itemsss.id}); }); } }); } }); } }); return options; }, handleNodeClick(node){ this.value = node.id; this.$refs.selectTree.blur(); } } } </script> <style> .main-select-el-tree .el-tree-node .is-current > .el-tree-node__content{font-weight: bold; color: #409eff;} .main-select-el-tree .el-tree-node.is-current > .el-tree-node__content{font-weight: bold; color: #409eff;} </style>
效果截图:
此功能的特点:巧妙的利用了select组件的渲染方式,通过隐藏options来动态计算下拉高度,通过模型同步实现了select组件渲染,不必赋值,同步模型。