element UI中在 el-select 与 el-tree 结合组件实现过程

前言

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

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

实现效果如下：

数据回显效果：

实现关键部分

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

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

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

let data=[
  {
    label:'追加1',
    currentShowCheck:true
   },
   {
     label:'追加2',
     currentShowCheck:true
    }
  ]

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

<!--            显示 checkbox  有指定字段才显示   checkbox  currentShowCheck-->
      <el-checkbox
          v-if = "showCheckbox && node.data.currentShowCheck"
	  v-model="node.checked"
	  :indeterminate="node.indeterminate"
	  :disabled="!!node.disabled"
	  @click.native.stop
	  @change="handleCheckChange
>
</el-checkbox>
<span
   v-if="node.loading"
   class="el-tree-node__loading-icon el-icon-loading">
 </span>
 <node-content : node="node"></node-content>

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

到此这篇关于element UI中在 el-select 与 el-tree 结合组件实现过程的文章就介绍到这了,更多相关el-select 与 el-tree 结合组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解决vue elementUI 使用el-select 时 change事件的触发问题

    如下所示: <el-select v-model="level" size="mini" placeholder="请选择" :change="selectChange()"> <el-option v-for="item in select" :key="item.value" :label="item.label" :value="it

  • 如何使用el-table+el-tree+el-select动态选择对应值

    目录 背景描述: 我碰到的问题: 解决问题: 总结 使用el-table+el-select+el-tree来实现element中el-table表格动态选择对应值 背景描述: 项目组的老大让我们完成一个选择一个下拉框中的值,然后再动态选择该下拉框中树形结构的数值,说起来有点绕,给大家截个图,大家就一目了然了. 其实这个功能的实现主要借助与el-table.el-tree.el-select这三个组件就可以实现. 我碰到的问题: (1)el-tree数据不显示. (2)el-tree显示数据后无

  • el-select与el-tree结合使用实现树形结构多选框

    目录 前言 话不多说,上代码 思路: 重点: 总结 前言 接上篇文章需求,选择树形结构的时候有多选的情况,用上一篇的单选并不能解决问题,下图是这次达到的效果 话不多说,上代码 html <el-select v-model="value" multiple placeholder="请选择" :popper-append-to-body="false" @remove-tag="removetag" collapse-t

  • vue el-select与el-tree实现支持可搜索树型

    目录 1. 树型下拉菜单 2. vue页面代码 3. selectTree 组件代码 1. 树型下拉菜单 实现效果 2. vue页面代码 引入selectTree组件 import { selectTree } from '@/components' export default { components: { selectTree }, data() { defaultData:{ managementStationId:'1478570186653609986', managementSta

  • 解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

    这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除. 实现效果: el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性,所有明显不支持. 解决思路(从el-select 的角度来考虑,其他组件组合的情况暂不考虑) 想要实现某些选项是不删除,1.需要tag 不可删除,2.options 不可选择 options 不可选择很好实现,只需要给一个disabled属性.tag 不可删除才是关键.下面是我

  • 详解element-ui中el-select的默认选择项问题

    详解element-ui中el-select的默认选择项问题

    直接绑定将option中的value值绑定给v-model <template> <div> <el-select v-model="query"> <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"></el-optio

  • vue2.0 + element UI 中 el-table 数据导出Excel的方法

    1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel

  • Web Components实现类Element UI中的Card卡片

    Web Components实现类Element UI中的Card卡片

    目录 引言 Web Components 核心组成 1. Custom Elements 2. Shadow DOM 3. templates 和 slots 完整代码 Web Components vs Vue Components Web Components 生命周期回调函数 优点 and 缺点 七.基于web components的框架 引言 Web Components 是一个浏览器原生支持的组件化方案,允许你创建新的自定义.可封装.可重用的HTML 标记.不用加载任何外部模块,直接就

  • Element UI中table单元格合并的解决过程

    Element UI中table单元格合并的解决过程

    目录 引言 解决思路: 1.格式化后台返回的数据(根据实际数据格式处理) 2.在 data 中定义数据,需要合并几列就定义几个数组和索引 3.定义合并函数 4.table 组件属性 span-method 的单元格合并方法: 完整代码: 总结 引言 项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 table 组件的 span-method 属性.

  • element UI 中的 el-tree 实现 checkbox 单选框及 bus 传递参数功能

    element UI 中的 el-tree 实现 checkbox 单选框及 bus 传递参数功能

    el-tree 单选功能 在日常项目开发中,会经常遇到,树形结构的查询方式,为了快速方便开发,常常会使用到快捷的ui组件去快速搭树形结构,这里我用的是 element ui 中的 el-tree .第一次接触这种功能的时候也是各种网站查询,虽然也都能实现功能,但是都会有一些小问题,就很难受,那么我们废话不多说(好像也说了不少呢),直接上效果. el-tree 单选 html 代码 *** 注: load 和 lazy 属性不是需要的粘贴时请删除.(只有需要懒加载的树才需要,关于怎样构建懒加载树以

  • 关于element ui中el-cascader的使用方式

    目录 element ui中el-cascader使用 例→ 代码 element中el-cascader使用及自定义key名 element ui中el-cascader使用 要想实现进入页面直接选中选择器中的选项 例→ 那v-model绑定的值必须是数组形式的!!(element ui官方文档中没提到这一点好像,我也是试了很多次才发现的) 代码 <el-form-item label="分类:" prop="region" class="regi

  • element UI中在 el-select 与 el-tree 结合组件实现过程

    前言 项目上实现某个功能,使用到了 el-select 和 el-tree 组合实现,记录下两者结合的实现过程. 要求根据项目接口提供的数据,el-tree 里的数据是一次性返回来的,点击最后一层级时,请求接口,在点击层级下方追加数据追加的数据要显示勾选框,可进行勾选,且是单选勾选后需要返回勾选的层级以及它的父级 实现效果如下: 数据回显效果: 实现关键部分 el-tree里的显示勾选框不符合当前“追加的数据要显示勾选框,可进行勾选”这个需求,所以我修改了el-tree的源码进行使用. 追加子级

  • Element UI中v-infinite-scroll无限滚动组件使用详解

    目录 一.v-infinite-scroll无限滚动组件使用详解 二.组件无限加载原因及解决方式 三.总结 总结 一.v-infinite-scroll无限滚动组件使用详解 1.v-infinite-scroll="load" //load无限滚动加载的方法 2.infinite-scroll-disabled //是否禁用无限滚动加载 3.infinite-scroll-delay //节流时延,单位为ms 4.infinite-scroll-distance //触发加载的距离阈值

  • Vue+Element UI 实现视频上传功能

    Vue+Element UI 实现视频上传功能

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传API并返回URL. 二.具体实现 1.效果图展示 2.HTML代码 <div class="album albumvideo"> <div> <p class="type_title"> <span>视频介绍</spa

  • 通过Element ui往页面上加一个分页导航条的方法

    通过Element ui往页面上加一个分页导航条的方法

    需求 加入一个分页条,此分页条可以跳转页面,可以根据页码选择具体页面,可以设置当前页面的大小. 在element ui官网选择Pagination分页组件 进入element ui官网,然后选择一个合适的分页组件,如下图: UserList.vue组件的template模板中的分页组件的代码和效果 分页组件的代码如下图: 分页组件的效果如下图: 分页组件牵涉到的data数据和methods方法 分页组件牵涉到的data数据如下图: 分页组件牵涉到的methods方法如下图: 测试 首先进入首页,

  • vue3.0安装Element ui及矢量图使用方式

    vue3.0安装Element ui及矢量图使用方式

    在此只关注v3的安装及使用,如果想了解v2可移步到其官网:https://element.eleme.io/#/zh-CN/component/installation v3官网:https://element-plus.org/zh-CN/guide/installation.html 使用element ui时vue2和vue3的区别 安装命令 main.js中引入文件有所不同 使用icon时v2不需要安装,v3需安装 v2和v3在vue文件中使用icon时编写方式有所不同 icon在v2中

随机推荐