# Java穿梭框：小工具，大功能
## 什么是穿梭框？
穿梭框（Transfer Box）是一种用户界面组件，常用于在两组数据之间进行快速选择和移动。在Java中，穿梭框通常应用于需要在两个列表间选择项的场景，比如用户权限设置、角色选择等。通过这个简单的组件，用户可以快速选择合适的选项并将其传递到目标列表中。
## 穿梭框的工作原理
穿梭框主要由两个列表组成：左侧列表显示可选项，右侧列表
原创
2024-09-05 03:31:32
38阅读
对应的后台代码，有的可能是不通的，不填了。 注意点，用到了好多的查询控制。主要思路就是，选择左框数据，按下按钮，存到数据库，然后左右表重载渲染。 选择右框数据，按下按钮，删除数据库中的数据，左右表重载渲染。渲染的时候，注意左边的要排除掉右边的数据。采用sql语句。 注意使用隐藏按钮。采用js，调用layui的渲染。selectDislodgeData
===
*
穿梭框相信很多人接触过，在写后台管理系统的项目时有很大可能性会用到这个功能。其实这个组件在element ui里面有，但是因为兼容性ie的问题（万恶的ie啊），我现在必须手写一个类似的功能供项目使用乞丐样式上图原汁原味基本没有经过任何修饰的html，有一种朴素的美。。。还是以功能为主啊，只写了的简单的样式。。。主要功能就是左侧某一个checkbox选中后点击‘选中过’按钮，此选项就出现在右侧的框中
转载
2023-08-04 14:03:07
192阅读
EasyDSS 高性能流媒体服务器前端架构概述EasyDSS 高性能流媒体服务器前端部分最初采用的是 AdminLTE + 各方 jQuery 插件的开发方式, 也就是网络上通常讲的 bootstrap + jquery plugins 的方式. 有经验的前端开发者想必都了解这种架构下开发前端页面的痛点. 当一个页面上 UI 组件多起来的时候, 代码组织就容易变得混乱, 各种 $(document
<template>
<el-transfer v-model="value" :data="data"></el-transfer>
</template>
<script>
export default {
data() {
const generateData = _ => {
c
原创
2023-09-18 09:22:16
92阅读
1.需求 要做这种带搜索的选择穿梭框2.实现在template中<el-transfer
:titles="['所有角色', '已选角色']" // 两个穿梭框标题
filterable // 可以搜索的属性
:filter-method="filterMethod" // 搜索方法
filter-placeholder="请输入用户"
v-model="re
转载
2024-07-23 10:23:19
198阅读
element-ui自带的穿梭框两边都是列表的格式，想要更多样式就自己造吧~思想是：点击“添加”数据从左边列表删除，插入到右边列表中，由于没有添加后台，刷新之后数据就恢复了，实际使用的时候得访问后台接口才行~完整代码在最后面。效果图：左边是一排按钮组成的列表，也可以用ul li实现，右边是el-table表格。1.布局：添加对话框，将对话框的body从左到右分成三部分<el-dialog t
转载
2023-12-19 22:30:31
179阅读
需求左右选项框，渲染可选选项* 左右 选项 通过 被选后 移动到对应左右选框选框的全选（全不选）有禁止选择的选项实时显示被选的选项个数移动后 选项 的选择勾选 自动取消全部为 Vue 本地 的响应式 数据操作记得注意细节：如：选项移动后 选择转台自动取消效果思路&代码其实 从需求里面就可以直接分析出大概思路了，讲太多反而不好理解，就直接从script 标签要做什么说分别为左右 选框 创建
转载
2024-05-07 11:56:49
1045阅读
开发中，经常有穿梭框的需求，但常见的灵活性较低，不支持左右树形，因此在项目开发过程中，摸索了treeTransfer库，是基于element组件库的。如下图所示 树形穿梭框
treeTransfer安装 安装elementUi后，npm i el-tree-transfer在页面使用引入，import treeTransfer from 'el
转载
2024-03-26 18:19:08
763阅读
场景： 选择商品展示效果可直观化——
穿梭框形式 效果<!--活动设置-满减活动列表-新增页面reduce_settings-->
<template>
<div id="reduce_settings">
<div style="font-size: 12px;">
<el-breadcrumb separator-cl
转载
2024-06-09 10:45:17
251阅读
一、使用原生js实现拖拽<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Lazyload</title>
<style>
.drag {
background-color: skybl
转载
2024-05-06 16:42:55
213阅读
文章目录工作任务说明一、穿梭框组件前端js代码1、这里的`data`的格式要求json格式2、`value`属性的值二、树状下拉框前端js代码1、这里写一下tree格式数据的生成2、tree中被选中的集合注意事项 今天的日期不错，比较特别。 工作任务说明工作任务，是为项目的首页增加一个快捷访问的标签卡，同时增加一个添加快捷访问的添加功能。就比如一些app首页，添加“常用”的功能。 前端首页的H
转载
2024-06-12 14:15:03
638阅读
效果图如下：一、需求要求：1、勾选左侧的功能资源，点击【添加】，可将内容添加到右侧，并且左侧勾选的数据删除；勾选右侧的已选资源，效果同左侧一样；2、勾选全选，则资源全部添加到右侧，左侧的则显示为空二、代码如下：<div>
<el-row>
<el-col :span="12">
<div class="trans
转载
2024-05-31 01:49:51
330阅读
项目开发使用的elemnetUI的table组件，牵扯到一个多选框的回显机制，这里记录一下。那么想要实现table的多选框回显，前提得有多选框，而实现回显也主要有依赖多选框自带的几个事件，当表格存在多选框时这几个事件便可以生效：<el-table
row-key="id"
:data="tableData"
v-loading.bo
转载
2023-06-09 13:05:31
298阅读
el-tree和el-transfer穿梭树踩坑 穿梭树github地址: https://github.com/hql7/tree-transfer 先 npm 下载插件npm install el-tree-transfer --save或npm i el-tree-transfer -S然后你可以像使用普通组件一样使用 el-tree-transfer html代码：<tem
转载
2024-05-28 09:34:12
1146阅读
需求:更改elementui中el-transfer样式， 实现单击左侧选项即加入右边选框，单击右侧选项即可回到左侧选框，中间左右来回按钮更改为左侧全选右侧全选,最终修改后效果图如下本以为自己能够不看elementui源码实现这需求，在折腾了一天还没实现后，还是回归到其源码进行研究，自己通过纯vue实现主要遇到了以下问题:若是不需要进行模糊查询可通过index进行增删改查实现穿梭框功能，但是若是加
转载
2024-04-01 14:22:30
226阅读
穿梭框双栏穿梭选择框，常用于将多个项目从一边移动到另一边。说明Transfer 组件主要基于
原创
2023-04-25 09:48:55
363阅读
现象：我们渲染了9999条数据，由于transfer组件会一次性渲染所有数据，所以一次性渲染这么多，卡个几十秒很正常好吧。所以懒加载或者分页是基本操作，方案二是分页操作。懒加载的方式可以用EUI的无限滚动：https://element.eleme.cn/#/zh-CN/component/infiniteScroll即便我们做了懒加载之后，点击全选依旧是卡顿6秒以上，所以方案一解决的是：即便做了
转载
2024-03-06 17:02:52
454阅读
教你从零写vue穿梭框1. 前言2. 制作选择组件（select-input）2. 制作vue穿梭框组件（table-transfer）4. 将选择组件和穿梭框组件结合使用4.1 点击选择组件按钮，弹出穿梭框4.2 将select-input组件中的数据显示在弹框中的已选表格中4.2.1 全局引入lodash4.2.2 初始化input-select组件list数据和穿梭框的selectList
转载
2024-05-07 14:26:31
356阅读
本文是自己对layui.transfer 穿梭框的基本使用总结，未涉及到的内容可以在layui.transfer官方文档中查找。下图为穿梭框的基本样式，效果还是不错的，能够满足系统中多种场景下的需求，它可以进行数据的交互筛选。1、基础效果实现<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
转载
2023-11-24 09:04:31
360阅读
