穿梭框+el-tree，递归实践

最新推荐文章于 2024-05-22 14:22:01 发布

HainesFreeman

最新推荐文章于 2024-05-22 14:22:01 发布

阅读量584

点赞数

CC 4.0 BY-SA版权

分类专栏：项目难点

本文链接：https://blog.csdn.net/weixin_41829196/article/details/112466186

该博客展示了如何结合穿梭框和el-tree组件实现递归功能，通过提供的效果图，可以了解到在实际应用中如何进行数据操作和交互设计。文章详细介绍了所用到的前端组件及其在递归场景下的实践应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完成的效果图：

使用的组件：

Tag.vue
<template>
  <div class="flow-layer-tag-wrapper">
    <div class="left">
      <p class="title">可选标签</p >
      <!-- 搜索区 -->
      <div class="search">
        <el-input placeholder="请输入关键字" v-model="filterTagName" clearable>
        </el-input>
      </div>
      <!-- 左边内容区 -->
      <div class="content">
        <!-- 树形组件 -->
        <div class="tag-top">
          <el-tree
            ref="tree"
            :data="treeData"
            :props="treeProps"
            node-key="label"
            :check-on-click-node="true"
            highlight-current
            show-checkbox
            :filter-node-method="filterNode"
            default-expand-all
            @check="handleCheckChange">
          </el-tree>
        </div>
      </div>
    </div>
    <!-- 右边内容区 -->
    <div class="right">
      <p class="title">已选标签</p >
      <div class="search">
        <el-input placeholder="请输入关键字" v-model="selectedName" clearable>
          <el-button slot="append" @click="handleReset">清空</el-button>
        </el-input>
      </div>
      <div class="content" v-if="selectedTags.length">
        <div class="block" v-for="(tagItem, index) in searchSelectedTags" :key="index">
          <div class="wrapper" @click="handleChecked(index)" :class="[currentIndex === index ? 'active' : '']">
            <div class="main">
              <div :span="20" class="tag" v-for="(child, childIndex) in tagItem" :key="child.label">
                <div>{
  
  { child.value }}</div>
                <el-button icon="el-icon-minus" type="danger" class="tag-btn" circle  @click="handleDelete(child, childIndex, index)"></el-button>
              </div>
            </div>
            <el-button size="mini" type="text" style="width: 40px; color: #999;">并集</el-button>
          </div>
          <el-button size="mini" type="text" v-if="index === selectedTags.length - 1" @click="handleAddWrapper">新建交集</el-button>
          <el-button size="mini" v-else>交集</el-button>
        </div>
      </div>
      <div v-else class="content-empty">
        请从左侧添加标签
      </div>
    </div>
  </div>
</template>

<script>
// import debounce from '@/utils/debounce'
export default {
  name: 'Tag',
  props: {
    oTreeData: {
      type: Array,
      default: () => {
        return []
      }
    },
    parentTags: Array, // 数据回显
  },
  data() {
    return {
      treeProps: {
        label: 'value',
        children: 'child'
      },
      currNodeId: '',
      count: 1,
      tagName: '',
      filterTagName: '',
      selectedName: '',