ElementUI之tree形下拉选

朱雀 2024-04-18 06:23 61阅读 0赞

### ElementUI之tree形下拉选 ###

vue代码：

<el-row>
      <el-col :span="11">
        <el-form-item label="类型" prop="categoryId">
          <SelectTree
            :props="props"
            :options="categoryList"		//数据源
            :clearable="true"
            :accordion="true"
            :disableds="false"
            @getValue="handleChange($event,row)"/>		//点击事件
        </el-form-item>
      </el-col>
    </el-row>

import SelectTree from "@/views/SelectTree.vue";	//引入
        data() { 
          return { 
            props:{                
              value: 'id',
              label: 'label',
              children: 'children',
            },
          }
       }

SelectTree.vue

<template>
      <el-select :value="valueTitle" :clearable="clearable" :disabled="disableds" @clear="clearHandle">
        <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"
                    @node-click="handleNodeClick">
          </el-tree>
        </el-option>
      </el-select>
    </template>
    
    <script>
      export default { 
        name: "el-tree-select",
        props:{ 
          /* 配置项 */
          props:{ 
            type: Object,
            default:()=>{ 
              return { 
                value:'id',             // ID字段名
                label: 'label',         // 显示名称
                children: 'children'    // 子级字段名
              }
            }
          },
          /* 选项列表数据(树形结构的对象数组) */
          options:{ 
            type: Array,
            default: ()=>{  return [] }
          },
          /* 初始值 */
          value:{ 
            type: Number,
            default: ()=>{  return null }
          },
          /* 可清空选项 */
          clearable:{ 
            type:Boolean,
            default:()=>{  return true }
          },
          rules:{ 
            type:Array
          },
          /* 禁用 */
          disableds:{ 
            type:Boolean,
            default:()=>{  return true }
          },
    
          /* 自动收起 */
          accordion:{ 
            type:Boolean,
            default:()=>{  return true }
          },
        },
        data() { 
          return { 
            valueId:this.value,    // 初始值
            valueTitle:'',
            defaultExpandedKey:[]
          }
        },
        mounted(){ 
          this.initHandle()
        },
        methods: { 
          // 初始化值
          initHandle(){ 
            if(this.valueId){ 
              this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label]     // 初始化显示
              this.$refs.selectTree.setCurrentKey(this.valueId)       // 设置默认选中
              this.defaultExpandedKey = [this.valueId]      // 设置默认展开
            }
            this.initScroll()
          },
          // 初始化滚动条
          initScroll(){ 
            this.$nextTick(()=>{ 
              let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
              let 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.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(){ 
            let allNode = document.querySelectorAll('#tree-option .el-tree-node')
            allNode.forEach((element)=>element.classList.remove('is-current'))
          }
        },
        watch: { 
          value(){ 
            this.valueId = this.value
            this.initHandle()
          }
        },
      };
    </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;
      }
    </style>

java代码

@ResponseBody
    @RequestMapping("/queryTreeData")
    public List<TreeData<Category>> queryTreeData() { 
        TreeData<Category> tree = categoryService.queryTreeList();
        return tree .getChildren();
    }

public interface CategoryService { 
    	TreeData<Category> queryTreeList();
    }

@Service
    @Transactional
    public class CategoryServiceImpl implements CategoryService { 
        @Override
        public TreeData<Category> queryTreeList() { 
            //查询源数据(根据实际情况调整)
            List<Category> categoryList = categoryMapper.queryCategoryList();
            //组织数据
            List<TreeData<Category>> treeList = new ArrayList<>();
            for (Category category: categoryList ) { 
                TreeData<Category> tree = new TreeData<>();
                tree.setParentId(category.getCategoryPid());
                tree.setId(category.getCategoryId());
                tree.setLabel(category.getCategoryName());
                tree.setDomPath(category.getPath());
                treeList.add(tree);
            }
            // 默认顶级菜单数据库存为0，根据实际情况调整
            TreeData<Category> tree = this.build(treeList);
            return tree;
        }
    
    	public static <T> TreeData<T> build(List<TreeData<T>> nodes) { 
    		if (nodes == null) { 
    			return null;
    		}
    		List<TreeData<T>> topNodes = new ArrayList<>();
    		for (TreeData<T> children : nodes) { 
    			String pid = children.getParentId();
    			// 默认顶级菜单数据库存为0，根据实际情况调整
    			if (pid == null || "0".equals(pid)) { 
    				topNodes.add(children);
    				continue;
    			}
    			for (TreeData<T> parent : nodes) { 
    				String id = parent.getId();
    				if (id != null && id.equals(pid)) { 
    					parent.getChildren().add(children);
    					children.setHasParent(true);
    					parent.setChildren(true);
    					continue;
    				}
    			}
    		}
    		TreeData<T> root = new TreeData<T>();
            root.setId("-1");
            root.setParentId("");
            root.setHasParent(false);
            root.setChildren(true);
            root.setChecked(true);
            root.setChildren(topNodes);
            root.setLabel("顶级节点");
    
    		return root;
    	}
    }

@Data
    public class TreeData<T> { 
    	
    	private String id;//节点ID
    
    	private String parentId;//父ID
    	
    	private String label;//显示节点文本
    
    	private String domPath;//结构
    
    	private List<TreeData<T>> children = new ArrayList<TreeData<T>>();//节点的子节点
    	
    	private boolean checked = false;//节点是否被选中 true false
    
    	private boolean hasParent = false;//是否有父节点
    	
    	private boolean hasChildren = false;//是否有子节点
    
    	private String domDesc;//备注
    
    	public void setChildren(boolean isChildren) { 
    		this.hasChildren = isChildren;
    	}
    	
    	public void setChildren(List<TreeData<T>> topNodes) { 
    		this.children = topNodes;
    	}
    }