前言

项目上实现某个功能,使用到了 el-select 和 el-tree 组合实现,记录下两者结合的实现过程。

要求

实现效果如下:
【element UI】在 el-select 与 el-tree 结合组件

数据回显效果:
【element UI】在 el-select 与 el-tree 结合组件

实现关键部分

el-tree里的显示勾选框不符合当前“追加的数据要显示勾选框,可进行勾选”这个需求,所以我修改了el-tree的源码进行使用。

  1. 追加子级数据,el-tree 文档提供了这个这个方法,可以追加子级
    【element UI】在 el-select 与 el-tree 结合组件

  2. 数据对象里有指定字段才显示勾选框,这里我指定字段为 currentShowCheck,数据追加的时候把指定需要显示勾选框的字段加上
    【element UI】在 el-select 与 el-tree 结合组件

修改源码,数据中有 currentShowCheck 字段的则显示 checkbox
【element UI】在 el-select 与 el-tree 结合组件

这样子就实现以上的效果了

发表回复