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>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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;
	}
}