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 结合组件内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！