基于Element-ui 封装穿梭框（左侧树 右侧列表，可全选，列表可拖拽）

已于 2022-10-28 18:19:21 修改
阅读量8.2k 收藏 49
点赞数 6
分类专栏： Vue 文章标签： vue.js elementui 前端 javascript
于 2022-07-04 18:40:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40615155/article/details/125606140
版权

Element-ui提供的穿梭框只支持列表，根据实际需求自己写了一个左边是树结构，右边是列表结构的穿梭框，（如果需要两边都是树结构的话，需要把右侧的逻辑参考左侧改一改）拖拽使用了vuedraggable插件

效果图

左侧树右侧列表的穿梭框

组件代码

<template>
  <div class="transfer-tree">
    <div class="transfer-panel">
      <div class="transfer-panel-header">
        <el-checkbox
          v-model="leftAllChecked"
          :disabled="!(leftDataList && leftDataList.length)"
          :indeterminate="isIndeterminateLeft"
          @change="handleCheckAllChangeLeft">{{ leftTitle }}</el-checkbox>
      </div>
      <div class="transfer-panel-body">
        <el-tree
          ref="leftTree"
          show-checkbox
          check-on-click-node
          default-expand-all
          :node-key="defaultProps.key"
          :data="leftDataList"
          :props="defaultProps"
          @check="handleCheckLeft">
        </el-tree>
      </div>
    </div>
    <div class="transfer-buttons">
      <el-button
        class="mb8"
        size="mini"
        icon="el-icon-arrow-left"
        :disabled="!(rightCheckedList && rightCheckedList.length)"
        @click="handleLeftChange"></el-button>
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-arrow-right"
        :disabled="!(leftCheckedList && leftCheckedList.length)"
        @click="handleRightChange"></el-button>
    </div>
    <div class="transfer-panel">
      <div class="transfer-panel-header">
        <el-checkbox
          v-model="rightAllChecked"
          :disabled="!(rightDataList && rightDataList.length)"
          :indeterminate="isIndeterminateRight"
          @change="handleCheckAllChangeRight">{{ rightTitle }}</el-checkbox>
          <!-- 右侧数据量/限制最大可保存数据量 -->
        <span class="transfer-panel-ratio">{{ rightDataList.length }}/{{ maxLimitCount }}</span>
      </div>
      <div class="transfer-panel-body">
        <el-checkbox-group
          v-if="rightDataList && rightDataList.length"
          v-model="rightCheckedKeyList"
          @change="handleCheckRight">
          <draggable
            v-model="rightDataList"
            chosenClass="chosen"
            forceFallback="true"
            animation="200"
            @start="drag = true"
            @end="drag = false"
            @update="handleOrder">
            <transition-group>
              <el-checkbox
                v-for="(item, index) in rightDataList"
                :key="`right_${item[defaultProps.key]}_${index}`"
                :label="item[defaultProps.key]"
                >{{ item[defaultProps.label]}}
                <img
                  src="@/assets/drag_icon.svg"
                  alt="拖拽排序"
                  width="40"
                  height="15" /></el-checkbox>
            </transition-group>
          </draggable>
        </el-checkbox-group>
        <el-empty description="暂无数据" v-else></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import { number } from 'echarts';
import draggable from 'vuedraggable';

export default {
  name: '',
  components: {
    draggable,
  },
  props: {
    // tree的默认结构
    defaultProps: {
      type: Object,
      required: true,
      default: () => ({
        children: 'children',
        label: 'label',
        key: 'key',
        parentKey: 'parent', // 这个属性不是 tree组件需要的，是子节点数据中记录父节点标识的属性
      }),
    },
    // left 原始数据
    leftOriginalList: {
      type: Array,
      default: () => [],
    },
    // right 原始数据
    rightOriginalList: {
      type: Array,
      default: () => [],
    },
    // 最大可保存数据量
    maxLimitCount: {
      type: Number,
      default: 0,
    },
    // left 标题
    leftTitle: {
      type: String,
      default: '可选项',
    },
    // right 标题
    rightTitle: {
      type: String,
      default: '已选项',
    },
  },
  data() {
    return {
      leftAllChecked: false, // left 全选checkbox
      leftDataList: [], // left 所有数据
      leftCheckedList: [], // left 选中的数据
      isIndeterminateLeft: false,
      rightAllChecked: false, // right 全选checkbox
      rightDataList: [], // right 所有数据
      rightCheckedList: [], // right 选中的数据 =>rightCheckedKeyList对应的 对象数组
      rightCheckedKeyList: [], // right 选中的 key list => 绑定在 el-checkbox-group上的 list
      isIndeterminateRight: false,
      drag: false,
    };
  },
  // 初始化
  watch: {
    leftOriginalList: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.leftDataList = JSON.parse(JSON.stringify(newVal));
        this.leftCheckedList = [];
        this.leftAllChecked = false;
        this.isIndeterminateLeft = false;
      },
    },
    rightOriginalList: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.rightDataList = JSON.parse(JSON.stringify(newVal));
        this.rightCheckedList = [];
        this.rightCheckedKeyList = [];
        this.rightAllChecked = false;
        this.isIndeterminateRight = false;
      },
    },
  },
  computed: {
    // left 所有子节点数据的数量
    leftDataTotal() {
      let count = 0;
      this.leftDataList.forEach((v) => {
        if (v[this.defaultProps.children]) {
          count += v[this.defaultProps.children].length;
        }
      });
      return count;
    },
  },
  methods: {
    // 选择——left
    handleCheckLeft(val, { checkedNodes }) {
      // 包含了父节点
      const checkedCount = checkedNodes.length;
      const totalNodeCount = this.leftDataTotal + this.leftDataList.length;
      this.leftAllChecked = checkedCount === totalNodeCount;
      this.isIndeterminateLeft = checkedCount > 0 && checkedCount < totalNodeCount;
      // 手动剔除父节点
      this.leftCheckedList = checkedNodes.filter((v) => (!v[this.defaultProps.children]));
    },
    // 选择——right
    handleCheckRight(val) {
      const checkedCount = val.length;
      this.rightAllChecked = checkedCount === this.rightDataList.length;
      this.isIndeterminateRight = checkedCount > 0 && checkedCount < this.rightDataList.length;
      // 手动组织对象数组
      this.rightCheckedList = this.rightDataList.filter((v) => (val.includes(v[this.defaultProps.key])));
    },
    // 全选——left
    handleCheckAllChangeLeft(val) {
      this.isIndeterminateLeft = false;
      const checkedNodes = [];
      if (val) {
        this.leftDataList.forEach((v) => {
          checkedNodes.push(v);
          if (v[this.defaultProps.children]) {
            v[this.defaultProps.children].forEach((child) => { checkedNodes.push(child); });
          }
        });
      }
      // 手动赋checkedlist值
      this.leftCheckedList = checkedNodes.filter((v) => (!v[this.defaultProps.children]));
      this.$refs.leftTree.setCheckedNodes(checkedNodes);
    },
    // 全选——right
    handleCheckAllChangeRight(val) {
      this.isIndeterminateRight = false;
      this.rightCheckedKeyList = val ? this.rightDataList.map((v) => (v[this.defaultProps.key])) : [];
      // 手动赋checkedlist值
      this.rightCheckedList = val ? this.rightDataList.map((v) => (v)) : [];
    },
    // 传递 right => left
    handleLeftChange() {
      // left +
      const leftDataMap = {};
      this.leftDataList.forEach((v) => {
        leftDataMap[v[this.defaultProps.key]] = v[this.defaultProps.children] || [];
      });
      this.rightCheckedList.forEach((v) => {
        leftDataMap[v[this.defaultProps.parentKey]].push(v);
      });
      // right -
      this.rightDataList = this.rightDataList.filter((v) => !(this.rightCheckedKeyList.includes(v[this.defaultProps.key])));
      // 清空选中数组
      this.rightCheckedList = [];
      this.rightCheckedKeyList = [];
      // right 全选 => 直接取消
      this.rightAllChecked = false;
      this.isIndeterminateRight = false;
      // left 全选 => 原先没有选中/半选中=>不动，原先全选=>半选中 => 重新渲染一次 tree组件选中
      if (this.leftAllChecked && !this.isIndeterminateLeft) {
        this.leftAllChecked = false;
        this.isIndeterminateLeft = true;
      }
      // 先清空再重置，直接重置的话，父节点的状态会有问题
      this.$refs.leftTree.setCheckedNodes([]);
      this.$nextTick(() => {
        this.$refs.leftTree.setCheckedNodes(this.leftCheckedList);
      });
      // 传递当前数据分布
      this.$emit('change', {
        left: this.leftDataList,
        right: this.rightDataList,
      });
    },
    // 传递 left => right
    handleRightChange() {
      // right +
      this.rightDataList.push(...this.leftCheckedList);
      // left -
      const { key, children } = this.defaultProps;
      const checkedKeys = this.leftCheckedList.map((v) => (v[key]));
      this.leftDataList.forEach((v) => {
        if (v[children]) {
          v[children] = v[children].filter((child) => !checkedKeys.includes(child[key]));
        }
      });
      // 清空选中数组
      this.leftCheckedList = [];
      // 清空 tree组件选中
      this.$refs.leftTree.setCheckedNodes([]);
      // left 全选 => 直接取消
      this.leftAllChecked = false;
      this.isIndeterminateLeft = false;
      // right 全选 => 原先没有选中/半选中=>不动，原先全选=>半选中
      if (this.rightAllChecked && !this.isIndeterminateRight) {
        this.rightAllChecked = false;
        this.isIndeterminateRight = true;
      }
      // 传递当前数据分布
      this.$emit('change', {
        left: this.leftDataList,
        right: this.rightDataList,
      });
    },
    handleOrder() {
      // 传递当前数据分布
      this.$emit('change', {
        left: this.leftDataList,
        right: this.rightDataList,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.transfer-tree {
  display: flex;
  width: 100%;
  .transfer-panel {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid $color-border;
    .transfer-panel-header {
      display: flex;
      justify-content: space-between;
      height: 30px;
      line-height: 30px;
      border-radius: 3px 3px 0px 0px;
      padding: 0 12px;
      ::v-deep .el-checkbox {
        .el-checkbox__label {
          color: $color-text;
          font-size: 14px;
          padding-left: 8px;
        }
      }
      .transfer-panel-ratio {
        font-size: 12px;
        color: $color-text;
      }
    }
    .transfer-panel-body {
      height: 200px;
      padding: 12px 12px 0 12px;
      border-top: 1px solid $color-border;
      overflow: auto;
      .transfer-panel-filter {
        float: right;
        width: 170px;
        .el-checkbox__label {
          color: $color-text;
          font-size: 12px;
          padding-left: 8px;
        }
        .el-input__inner {
          height: 26px;
          border: none;
        }
      }
      ::v-deep .el-tree {
        color: $color-text;
        margin-bottom: 4px;
        .el-tree-node__content {
          height: 22px;
          margin-bottom: 8px;
          .el-tree-node__label {
            font-size: 12px;
          }
        }
        .el-tree-node__children {
          .el-tree-node__content {
            padding-left: 12px!important;
          }
        }
        .el-tree-node__expand-icon {
          margin-left: -6px;
        }
      }
      ::v-deep .el-checkbox-group {
        margin-bottom: 4px;
        .el-checkbox {
          display: block;
          line-height: 22px;
          color: $color-text;
          margin-bottom: 8px;
          width: 100%;
          .el-checkbox__label {
            width: calc(100% - 5px);
            position: relative;
            font-size: 12px;
            padding-left: 8px;
            img{
              position: absolute;
              right: 0;
              top: 2px;
            }
          }
        }
      }
    }
  }
  .transfer-buttons {
    display: flex;
    justify-content: center;
    flex-flow: column;
    margin: 0 12px;
    .el-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 32px;
      height: 24px;
      padding: 0;
      margin-left: 0;
    }
  }
}
::v-deep .el-empty {
  height: 60px;
  padding: 0;
  .el-empty__image {
    display: none;
  }
  .el-empty__description {
    margin: 0;
  }
}
</style>

父组件调用

<template>
  <div>
  	<TransferTreeList
        :defaultProps="{ children: 'list', label: 'name', key: 'id', parentKey: 'classify' }"
        :leftOriginalList="unselectedList"
        :rightOriginalList="selectedList"
        :maxLimitCount="10"
        @change="handelSelectedChange" />
  </div>
</template>

<script>
import TransferTreeList from '@/components/TransferTreeList';

export default {
  name: '',
  components: {
    TransferTreeList,
  },
  data() {
    return {
      unselectedList: [ // 未被选中的选项
        {
          id: 'classify1',
          name: '分类1',
          list: [
            { id: 'kpi1-1', name: '选项1-1', classify: 'classify1' },
            { id: 'kpi1-3', name: '选项1-3', classify: 'classify1' },
          ],
        },
        {
          id: 'classify2',
          name: '分类2',
          list: [
            { id: 'kpi2-1', name: '选项2-1', classify: 'classify2' },
            { id: 'kpi2-3', name: '选项2-3', classify: 'classify2' },
          ],
        },
      ],
      selectedList: [ // 被选中的选项（选项内部要有父节点标识）
        { id: 'kpi2-2', name: '选项2-2', classify: 'classify2' },
        { id: 'kpi1-2', name: '选项1-2', classify: 'classify1' },
      ],
    };
  },
  methods: {
    handelSelectedChange(data) {
      console.log('最新数据', data)
    },
  },
};
</script>
Alice_hhu
关注
  • 6
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
专栏目录
element ui 穿梭框支持 树形结构(仅支持2层)
momo_mom177的博客
01-12 1308
【代码】element ui 穿梭框支持 树形结构(仅支持2层)
帮我使用vue+elementui实现一个需求：1，页面左右布局，左侧为el-tree树形结构菜单，右侧为对应的子组件 2、每个子组件都可以有表单构成 3、每个子组件都有一个提交按钮，点击这个提交按
sunshineDD_DD的博客
04-11 1890
在这段代码中，我们创建了一个左右布局的界面，左侧使用了ElementUI的树形菜单组件(el-tree)，右侧根据用户的选择展示不同的组件。这里我们用到了Vue中的动态组件和组件注册方式。接下来，我们需要为每个子组件添加表单，并在点击提交按钮时获取数据并提交给后端。每个子组件中添加了一个formData对象来存储用户输入的数据。
vue+elementUI实现树形穿梭框
大兵的猫
03-20 2174
思路二：利用elementUI的filter API对选中节点进行筛选，左侧筛选出未选中的，右侧筛选出选中的，用的还是同一棵树，用一个属性来区分是否选择，好处是子节点选中，父节点会跟随保存，不用重新构建树结构。将左侧选中的节点移动到右侧，还要保持树结构，意味着移动子节点，需要把该子节点对应的父节点甚至父节点的父节点一并移到右侧形成一个新的树结构，树结构的层级和原来的树保持一致，只是右侧展示的子节点为选中的子节点，filter API用法。
el-table实现穿梭框、分页、回显功能
qq_46663280的博客
11-27 1166
数据是我自己写死的，到时候你可以发起请求替换数据。代码等有时间再继续优化。
el-transfer和el-tree进行结合搞一个树形穿梭框
最新发布
bbkhhvv的博客
05-22 1662
由于业务需求需要在穿梭框里使用树形结构，但是本身element里并不支持，于是参考了别的大佬发的文章作为思路及后续自己新增了一些处理功能。
【Element-UI-穿梭框(Transfer)】
weixin_47416539的博客
04-26 3037
Element-UI-穿梭框(Transfer) 需要获得选中的那项详情，一共有俩个办法： 第一种方法： <el-transfer v-model="quesValues" :titles="['待选试题', '已选试题']" :format="{ noChecked: '${total}', hasChecked: '${checked}/${total}' }" :data="quesData">
vue element tree 页面左侧是一个部门树（异步加载），右侧是部门table表格数据，修改右侧table数据左侧tree局部刷新
weixin_39277183的博客
01-13 1807
开发要求：页面左侧是一个部门树（异步加载），右侧是部门table表格数据，修改右侧table数据左侧tree需要局部刷新。不管是哪个操作都要调用refreshNodeBy(id)方法才可以。这里table的代码和方法就省略…
Vue代码示例，左边Tree，右边对Tree节点配置子表多条数据
04-21
Vue代码示例，左边Tree，右边对Tree节点配置子表多条数据，列表显示，子表可增删改查。并附上后端Controller.java
elementUi+vue默认选中左侧树节点并加载右侧列表
loy_zy的博客
09-23 2310
Elementui穿梭框使用（动态数据）
szh1127249432的博客
08-18 1万+
今天简单记录一下用到的elementui穿梭框的使用 我需要新建一个项目，要传的参数包括项目名字和描述，还有一堆文件列表的id 这个时候就会用到elementui的穿梭框，不废话直接上代码 首先获取我需要的文件列表 里面包括文件的名字，id，文件大小等等 //获取文件列表 fileList() { this.axios({ url: API.filesList, method: "get" }).then(res => {
vue+element ui 完成 树形数据穿梭框
haoxinqing222的博客
09-13 3061
vue+element ui实现树形数据穿梭框
【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree
热门推荐
Sabrina_cc的博客
12-03 1万+
本文主要讲解了基础Element-ui中el-tree组件的使用，包括对组织机构树的组件封装，使用组织机构树进行查询，以及使用vue-content-menu修改editableTree
循序渐进VUE+Element 前端应用开发(8）--- 树列表组件的使用
2401_84094620的博客
04-06 639
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
基于Vue2的ElementUI组件总结
zhanghuaiwei
11-04 780
本文主要总结实际开发中，常用的Elementui的组件的使用及其bug处理。
vue+elementUI穿梭框
m0_58680865的博客
01-07 1641
穿梭框的实现思路，实现了可分页的表格穿梭框，同时涉及到了表格多选与表格里添加表单等知识点 <template> <div> <h1 style="color: #F56C6C">部门模块</h1> <el-form :inline="true" :model="staffTemp"> <el-form-item label="手机号"> <el-inp.
一个基于vue和element-ui的树形穿梭框组件
weixin_34396902的博客
07-06 857
因业务需求需要用到一个穿梭框组件，而各大主流ui库和市面上的穿梭框都是一维数据，不支持树形结构的穿梭数据， 然后我自己就写了一个树形穿梭框组件，ui完全按照element-ui风格。并且使用此插件时默认你已经引入了element-ui的button，check-box，tree组件！并且是一个vue项目，你就可以像使用普通vue组件一样使用它。 el-tree-transfer 简介·请先阅读文档...
vue ellmentUi自定义表格穿梭框
weixin_44826388的博客
05-25 2061
由于elementUi自带的transfer穿梭框中限制不能表格，现在自定义一个封装组件 <template> <el-row :gutter="20"> <el-col :span="11"> <el-input class="input" v-if="showSearch" v-model="searchLeft" placeholder="请输入搜索内容" &
elementui 使用el-table完成transfer基本功能
菜鸡奋斗ing的博客
08-14 1万+
不知道大家有没碰到用elementui中transfer组件功能，里面的列表其实是el-checkbox-group。这就有个问题，如果列表中有多列数据需要区分显示就没办法了，毕竟是el-checkbox。但是这种需求的功能一般项目都不多。 下面这个是我改造的效果 初始数据也可以在右边已选框中。如果有多列可以很好区分开。...
element-ui table隐藏表头中的全选框
05-20
要隐藏 Element-UI 表格中的表头全选框，可以通过设置 `show-header` 属性为 `false` 来实现。下面是一个示例代码： ```html <template> <el-table :data="tableData" :show-header="false"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 30 }, { name: 'Jane', age: 25 }, { name: 'Bob', age: 40 } ] }; } }; </script> ``` 在上面的代码中，`show-header` 属性被设置为 `false`，这样就可以隐藏表头中的全选框。请注意，这也会隐藏表头中的其他元素，如排序箭头和筛选框。如果需要保留这些元素，可以使用 CSS 样式来控制它们的显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值