草庐IT

【element UI】在 el-select 与 el-tree 结合组件

Clown 2023-03-28 原文

前言

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

要求
  • 根据项目接口提供的数据,el-tree 里的数据是一次性返回来的,点击最后一层级时,请求接口,在点击层级下方追加数据
  • 追加的数据要显示勾选框,可进行勾选,且是单选
  • 勾选后需要返回勾选的层级以及它的父级

实现效果如下:

数据回显效果:

实现关键部分

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

  1. 追加子级数据,el-tree 文档提供了这个这个方法,可以追加子级

  2. 数据对象里有指定字段才显示勾选框,这里我指定字段为 currentShowCheck,数据追加的时候把指定需要显示勾选框的字段加上

修改源码,数据中有 currentShowCheck 字段的则显示 checkbox

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

有关【element UI】在 el-select 与 el-tree 结合组件的更多相关文章

  1. ruby-on-rails - 结合 meta_search 与 acts_as_taggable_on - 2

    我在开发的Rails3网站的一些搜索功能上遇到了一个小问题。我有一个简单的Post模型,如下所示:classPost我正在使用acts_as_taggable_on来更轻松地向我的帖子添加标签。当我有一个标记为“rails”的帖子并执行以下操作时,一切正常:@posts=Post.tagged_with("rails")问题是,我还想搜索帖子的标题。当我有一篇标题为“Helloworld”并标记为“rails”的帖子时,我希望能够通过搜索“hello”或“rails”来找到这篇帖子。因此,我希望标题列的LIKE语句与acts_as_taggable_on提供的tagged_with方法

  2. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  3. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord,它正在融化我的大脑。deletefromtablewhereid有什么想法吗?我想做的是限制表中的行数。所以,我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看,您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  4. ruby-on-rails - 将 Amazon Simple Notification service SNS 与 ruby​​ 结合使用 - 2

    很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visitthehelpcenter.关闭9年前。我需要从基于ruby​​的应用程序使用AmazonSimpleNotificationService,但不知道从哪里开始。您对从哪里开始有什么建议吗?

  5. ruby-on-rails - rails 上的 ruby : radio buttons for collection select - 2

    我有一个集合选择:此方法的单选按钮是什么?谢谢 最佳答案 Rails3中没有这样的助手。在Rails4中,它是collection_radio_buttons. 关于ruby-on-rails-rails上的ruby:radiobuttonsforcollectionselect,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/18525986/

  6. ruby - Rails 3 - 我可以将开始日期设置为 date_select 方法吗? - 2

    date_select方法只能设置:start_year,但我想设置开始日期(例如3个月前的日期)(但没有这样的选项)。那么,我可以将开始日期设置为date_select方法吗?或者,要制作这样的选择框,我应该使用select_tag和options_for_select吗?或者,有什么解决办法吗?谢谢, 最佳答案 有可能……例如:start_year–设置年份选择的开始年份。默认为Time.now.year-5参见thisresource. 关于ruby-Rails3-我可以将开始日期

  7. ruby-on-rails - date_select ruby - 2

    如何在Ruby中扩展date_select的范围??它只显示2005年,我想用它作为出生日期。 最佳答案 您可以使用:start_year选项,参见thedocumentation. 关于ruby-on-rails-date_selectruby,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/2047739/

  8. ruby-on-rails - 将 Rails 与 Paperclip 和 SWFUpload 结合使用 - 2

    我有一个基本的Rails应用程序测试,其中包含一个用回形针处理的照片字段的用户模型。我创建了能够创建/编辑用户的View,并且照片上传工作正常。Editinguseruser_path(@user),:html=>{:method=>"put",:multipart=>true}do|f|%>|然后,我想将SWFUpload集成到我的应用程序中。我试着按照这个tutorial并运行testproject没有任何成功:浏览按钮不会打开文件对话框,并抛出错误#2176,这是关于selectFiles()方法的。首先,问题是Flashv.10与项目中包含的旧版本SWFUpload(2.1.0

  9. ruby-on-rails - rails 2.3.8, ruby 1.8.6 : Getting a visual call tree/graph of what methods call what? - 2

    我有一个中等复杂度的Rails应用程序。主Controller(执行应用程序所要做的事情的Controller)只有一个操作方法。(它不是标准的RESTful应用程序;它充当中介,并且对其调用方式有外部限制。)但是,它确实有很多方法和一些过滤器,以及一个不断增长的测试套件。随着时间的推移,结构发生了很大变化,我不再相信为之前编写的测试设置的某些Mocha期望仍然合适。有多个人在开发该应用程序,因此我正在构建一本用于编写功能测试的指南。“当你想在有/没有[那些]副作用的情况下进行测试时,使用[这些]期望和断言”等等。调用树/图在编写此类文档时非常有用。除了过滤器之外,这些甚至可以静态地从

  10. ruby-on-rails - Rails 4 Has_many :through join association with select - 2

    我正在尝试将Rails3.0应用程序升级到Rails4.0。我注意到的行为之一是模型之间的关系停止工作。假设我们有以下模型:classStudent:teacher_students,:select=>'teacher_students.met_with_parent,teachers.*'#TheRails4syntaxhas_many:teachers,->{select('teacher_students.met_with_parent,teachers.*')},:through=>:teacher_studentsendclassTeacher:teacher_student

随机推荐