Vue element基于el-tree实现自定义无穿梭按钮树形穿梭框

最新推荐文章于 2024-07-02 17:06:03 发布

意气风发的哆啦e梦

最新推荐文章于 2024-07-02 17:06:03 发布

阅读量1.8k

点赞数 3

分类专栏： Vue element javascript 文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/SpiritedDoraemon/article/details/126303656

版权

本文介绍了如何使用Vue.js和ElementUI组件库中的el-tree和el-table来实现一个自定义的树形穿梭框。内容涵盖左侧树形控件的全选、子集单独选中和取消功能，以及右侧列表的展示、隐藏和删除操作，同时强调了el-tree组件中node-key的设置要求。示例代码展示了数据结构和部分逻辑，但不包含右侧列表的数据校验。

摘要由CSDN通过智能技术生成

因为element组件库中Tree 树形控件自带穿梭框无法满足业务需求，所以利用el-tree和el-table结合的方式自定义穿梭框。
效果图
在这里插入图片描述
该功能满足左侧树形控件的整体选中和子集单独选中和取消效果，对应右侧列表的展示和隐藏以及自定义的删除列表项关联左侧树形控件自动取消功能。
代码如下

<template>
  <!-- 自定义树形穿梭框组件、理论上左右均可选择是否为树形结构，目前固定为左侧树形、右侧无层级结构 -->
  <div class="tree-transfer">
    <!-- 穿梭框左侧 -->
    <div class="tree-transfer-left">
      <el-tree
        ref="treeLeft"
        class="treeitems"
        :data="Left"
        show-checkbox
        node-key="Id"
        :props="defaultProps"
        default-expand-all
        @check-change="handleCheck"
      />
    </div>
    <!-- 穿梭框右侧 -->
    <div class="tree-transfer-right">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{
          background: '#E5ECF0',
        }"
      >