vue+element做的穿梭框

最新推荐文章于 2024-05-18 10:32:09 发布
最新推荐文章于 2024-05-18 10:32:09 发布
阅读量636 收藏
点赞数
分类专栏： vue+element 文章标签： vue+element做的穿梭框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34953053/article/details/100561297
版权

这是下载实例地址：https://github.com/lixinmusic/transfer
先上效果图和需求：在这里插入图片描述
需求：
在这里插入图片描述

在这里插入图片描述
效果图就是在这些了：
HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Transfer 穿梭框</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
      .el-table thead tr .el-checkbox__input {
      display: none;
      }
      .moveRight {
      text-align: center;
      margin-top: 30px;
      }
      .moveLeft {
      margin-top: 10px;
      }
      .moveTop {
      margin-top: 10px;
      }
      .moveDown{
      margin-top: 10px;
      }
    </style>
</head>
<body>
    <div id="paik">
     <el-row :gutter="20">
        <el-col :span="10">
            <span style="color:#606266;font-size:16px">规则列表：</span>
            <el-table :data="tableData" border ref="selection1" :header-cell-style="{background:'oldlace',color:'#606266'}"
                @selection-change="checkAll" style="width: 100%;">
                <el-table-column align="center" type="selection" width="30">
                </el-table-column>
                <el-table-column prop="ruleChildId" align="center" label="ID" width="90">
                </el-table-column>
                <el-table-column prop="ruleChildType" label="规则类型" width="180">
                    <template slot-scope="scope">
                        <span v-if="scope.row.ruleChildType == 1">日期</span>
                        <span v-else-if="scope.row.ruleChildType == 2">大写英文顺序号</span>
                        <span v-else-if="scope.row.ruleChildType == 3">小写英文顺序号</span>
                        <span v-else-if="scope.row.ruleChildType == 4">数字顺序号</span>
                        <span v-else>固定码</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="格式" width="80">
                    <template slot-scope="scope">
                        <span v-if="scope.row.ruleChildId==5||scope.row.ruleChildId==6||scope.row.ruleChildId==7" class="cell-edit-input">
                            <el-input v-model="scope.row.name" maxlength="2" onInput="this.value=this.value.replace(/[^1-9]*$/,'')"></el-input>
                        </span>
                        <span v-if="!scope.row.ruleChildId==5||scope.row.ruleChildId==6||scope.row.ruleChildId==7" style="margin-left:10px;"
                            class="cell-icon" @click="handleEdit(scope.$index,scope.row)">
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="位数" width="150">
                </el-table-column>
            </el-table>
        </el-col>
        <el-col :span="2.5">
            <div class="moveRight">
                <div @click="handelSelect">
                    <el-button icon="el-icon-arrow-right" :disabled="nowSelectData.length?false:true" size="mini" type="primary">
                        右移
                    </el-button>
                </div>
                <div class="moveTop" @click="moveTop()">
                    <el-button icon="el-icon-arrow-up" :disabled="nowSelectRightData.length?false:true" size="mini" type="primary">
                        上移
                    </el-button>
                </div>
                <div class="moveDown" @click="moveDown">
                    <el-button icon="el-icon-arrow-down" :disabled="nowSelectRightData.length?false:true" size="mini" type="primary">
                        下移
                    </el-button>
                </div>
                <div class="moveLeft" @click="handleRemoveSelect">
                    <el-button icon="el-icon-delete" :disabled="nowSelectRightData.length?false:true" size="mini" type="primary">
                        删除
                    </el-button>
                </div>
            </div>
        </el-col>
        <el-col :span="10">
            <span style="color:#606266;font-size:16px">生成规则：</span>
            <el-table :data="selectArr" border ref="selection" :header-cell-style="{background:'oldlace',color:'#606266'}"
                @selection-change="checkRightAll" height="510px" @select="checkRightAll1" style="width: 100%">
                <el-table-column align="center" type="selection" width="30">
                </el-table-column>
                <el-table-column prop="ruleChildId" align="center" label="ID" width="90">
                </el-table-column>
                <el-table-column prop="date" label="规则类型" width="180">
                </el-table-column>
                <el-table-column prop="name" label="格式" width="80">
                </el-table-column>
                <el-table-column prop="address" label="位数" width="150">
                </el-table-column>
            </el-table>
        </el-col>
     </el-row>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.1/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.3.9/index.js"></script>
<script src="tab.js"></script>
</html>

js代码：

var paik = new Vue({
  el: "#paik",
  data() {
    return {
      tableData: [
        {
          ruleChildId: 1,
          date: "2016-05-02",
          name: "王小",
          address: "上海市",
          ruleChildType:1
        },
        {
          ruleChildId: 2,
          date: "2016-05-04",
          name: "王虎",
          address: "上海市",
            ruleChildType:1
        },
        {
          ruleChildId: 3,
          date: "2016-05-01",
          name: "李三",
          address: "上海",
            ruleChildType:1
        },
        {
          ruleChildId: 4,
          date: "2016-05-03",
          name: "武义",
          address: "上海市",
            ruleChildType:1,
        },
        {
          ruleChildId: 5,
          date: "2016-05-03",
          name: "王大",
          address: "上海市普陀区",
            ruleChildType:2,
        },
        {
          ruleChildId: 6,
          date: "2016-05-03",
          name: "张媛",
          address: "上海",
            ruleChildType:3,
        },
        {
          ruleChildId: 7,
          date: "2016-05-03",
          name: "肖战",
          address: "上海市普陀",
            ruleChildType:4,

        },
        {
          ruleChildId: 8,
          date: "2016-05-03",
          name: "凯立",
          address: "上海市",
            ruleChildType:1,
        },
        {
          ruleChildId: 9,
          date: "2016-05-03",
          name: "尚武",
          address: "上海市普",
          ruleChildType:1,
        },
        {
          ruleChildId: 10,
          date: "2016-05-03",
          name: "溥仪",
          address: "上海市普",
            ruleChildType:1,
        }
      ],
      orderNum:null,
      selectArr: [], // 右边列表
      nowSelectData: [], // 左边选中列表数据
      nowSelectRightData: [] // 右边选中列表数据
    };
  },
  created() {},
  methods: {
    checkAll(val) {
      this.nowSelectData = val;
    },
    checkRightAll(val, row) {

      },
    checkRightAll1(val, row) {
        if (val.length > 1) {
            this.$refs.selection.clearSelection()
            val.shift()
            this.$refs.selection.toggleRowSelection(row)
        } else {
            this.nowSelectRightData = val;
            console.log(this.selectArr);
             this.selectArr.forEach((item, index) => {
                item.orderNum = index
                this.nowSelectRightData.forEach(spot => {
                    if (item.orderNum == spot.orderNum) {
                        this.orderNum = spot.orderNum
                    }
                })
            })
        }
        
      },
    // 右移
    handelSelect() {
        this.nowSelectData.forEach(item => {
            this.selectArr.push(JSON.parse(JSON.stringify(item)))
            this.$refs.selection1.clearSelection()
            this.nowSelectData = []
        })
    },
    // 上移
    moveTop() {
        if (this.orderNum == 0) {
            this.$message({
                message: '已经是列表中第一行!',
                type: 'warning'
            })
            this.$refs.selection.clearSelection()
            this.nowSelectRightData = []
            this.orderNum = null
            return
        }else{  
        const temp = this.selectArr[this.orderNum - 1]
        Vue.set(this.selectArr, this.orderNum - 1, this.selectArr[this.orderNum])
        Vue.set(this.selectArr, this.orderNum, temp)
        this.$refs.selection.clearSelection()
        this.nowSelectRightData = []
        }
    },
    // 下移
    moveDown() {
        if (this.orderNum == (this.selectArr.length - 1)) {
            this.$message({
                message: '已经是列表中第一行!',
                type: 'warning'
            })
            this.$refs.selection.clearSelection()
            this.nowSelectRightData = []
            this.orderNum = null
            return
        } else {
            const po = this.selectArr[this.orderNum + 1]
            Vue.set(this.selectArr, this.orderNum + 1, this.selectArr[this.orderNum])
            Vue.set(this.selectArr, this.orderNum, po);
            this.$refs.selection.clearSelection()
            this.nowSelectRightData = []
        }
    },
    // 删除
    handleRemoveSelect(){
        const i = this.$refs.selection.selection[0].orderNum
        if (this.$refs.selection.selection) {
            this.selectArr.splice(i, 1)
            this.$refs.selection.clearSelection()
            this.nowSelectRightData = []
        }
    },
  }
});

这是在项目遇到的一个奇葩需求，但还是要完成，先记录一下后期会说明一下。。。。。

奋斗的小鸟鸟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Element中Transfer 穿梭框的应用
qq_51196135的博客
01-10 2931
1、应用背景 项目中会需要对产品进行选择添加，我们可以用Transfer 穿梭框来实现这一需求。 视图： 2、代码实现 <template> <div class="bigbox"> <div class="topInfo">配置产品</div> <div class="scollbox" style="text-align: center"> <el-transfer st.
【若依前后端分离】el-table表格添加动态筛选列--显隐列(重新登录记忆上次选择的显隐列)
敲厉害的燕宝的博客
02-03 1503
el-table表格添加动态筛选列--显隐列(重新登录记忆上次选择的显隐列)，是对若依自带显隐列组件的解读和延伸，既可以动态显隐列，也可以退出登录后记住上次所勾选的显隐列，下次登录时，在create生命周期时进行记忆渲染，亲测好用，分享给大家！
Vue学习穿梭框Transfer组件
最新发布
李长渊的博客
05-18 1729
Vue学习穿梭框Transfer组件
element-ui table 实现客户端自定义列的显示隐藏
qq_36291747的博客
12-16 4869
文章目录前言一、最终实现的效果图二、实现步骤1. 列设置数据定义2. 本地数据存取方法封装2. 给表格添加右键出现的菜单3. 列设置数据与表格列进行关联4. 其它问题1. 列由隐藏，设置为显示后，表格抖动、样式错乱？总结 前言 提示：功能实现过了好久了，突然想起来一直没做个总结。好记性不如烂笔头，gogogo! 使用 element-ui 的 <el-table> 来显示系统中各种各样的数据，感觉美滋滋啊，方便又美丽。直到那天，来了个需求：给表格添加上数据列自定义显示/隐藏的功能。开始研究文档
Element el-transfer 穿梭框详解
程序员大阳
10-15 1万+
本文目录1. 前言2. 基本用法3. 可搜索4. 自定义标题和按钮的文本5. 设置数据项别名6. 小结 1. 前言 穿梭框就是左右各有一个复选框列表，可以将左侧选中的项目移动到右边，后者将右侧的选中项移回左边的控件。 一般用于物品交接等场景，本篇就来介绍下穿梭框的用法。 2. 基本用法 先看代码： 基本用法:{{value}} <el-transfer v-model="value" :data="preData" @change="selectChange"></el-tran
穿梭框的动态禁用
lcc0628的博客
09-08 2952
实现效果：当用户只有一个用户组时，不可进行移除操作，且超级管理员必须属于超级管理员用户组（超级管理员的roleId==1） 要求后台返回一个参数，表示这个用户只有一个用户组，再判断是否属于该用户组，属于则禁用 代码： <div style="text-align: center" v-loading="addloading"> <el-transfer style="text-align: left; display: inline-blo
vue+element-ui实现穿梭框数据自定义排序
12-05
在本文中，我们将深入探讨如何使用Vue.js框架与Element-UI库来实现穿梭框（Transfer）数据的自定义排序功能。Element-UI是基于Vue.js的一套丰富的UI组件库，其中包括了穿梭框组件，它常用于在两个列表之间进行数据的...
vue/element穿梭框组件
03-08
vue/element穿梭框组件
vue+Element-ui实现分页效果实例代码详解
10-17
Vue.js是一个轻量级的前端框架，它结合Element UI库可以轻松实现高效的分页效果。Element UI提供了丰富的组件，其中包括`Pagination`分页组件，使得开发者能够快速实现美观且功能完善的分页功能。 在Vue+Element UI...
vue按需引入element Transfer 穿梭框
08-29
本文主要介绍了 Vue 按需引入 Element Transfer 穿梭框的相关知识点，包括 Element Transfer 穿梭框的介绍、为什么需要按需引入 Element Transfer 穿梭框、如何按需引入 Element Transfer 穿梭框、配置 Babel 插件和...
VUE Elemen-ui之穿梭框使用方法详解
10-14
在Vue.js开发中，Element UI库提供了一种方便的组件——穿梭框（Transfer），用于在两个列表之间进行数据的转移操作，常用于角色分配、权限设置等场景。本文将详细介绍如何在Vue项目中使用Element UI的穿梭框组件。 ...
element ui中穿梭框等列表文字显示过长隐藏，鼠标移动上去显示全部
weixin_61232612的博客
11-18 779
element ui中穿梭框等列表文字显示过长隐藏，鼠标移动上去显示全部
修改el-transfer穿梭框的默认按钮颜色
weixin_43817709的博客
11-16 2277
element的el-transfer穿梭框很好用，但是总有满足不了业务的需求的时候，
element el-transfer穿梭框的使用，自定义穿梭框的数据项
热门推荐
weixin_43128854的博客
03-21 2万+
List item 查看element官方文档可以了解到 el-transfer穿梭框的基本使用方法，本文主要介绍数据项的自定义渲染和右侧列表元素变化时触发方法的实现。 自定义数据项，除了基本的el-transfer使用方法，还需要使用Scoped Slot。 查看官方文档，Transfer 的数据通过 data 属性传入。数据需要是一个对象数组，每个对象有以下属性：key 为数据的唯一性标...
Elementui穿梭框使用（动态数据）
szh1127249432的博客
08-18 1万+
今天简单记录一下用到的elementui穿梭框的使用 我需要新建一个项目，要传的参数包括项目名字和描述，还有一堆文件列表的id 这个时候就会用到elementui的穿梭框，不废话直接上代码 首先获取我需要的文件列表 里面包括文件的名字，id，文件大小等等 //获取文件列表 fileList() { this.axios({ url: API.filesList, method: "get" }).then(res => {
vue3.0 + element Plus实现穿梭框（el-transfer）
m0_52761651的博客
09-28 4532
vue3.0 + element UI实现穿梭框（el-transfer）
element-ui的Transfer 穿梭框拓展
weixin_51908375的博客
05-29 587
【代码】element-ui的Transfer 穿梭框拓展。
VUE　项目手写穿梭框
HelloWord176的博客
09-24 1358
项目用到了穿梭框这个功能，刚开始用 Element-UI 组件库来写，没有达到预期的效果，于是就自己手撸写了一个； 先看效果： 代码附上： <!-- 绑定设备弹窗 --> <el-dialog title="绑定定位触发器" :visible.sync="jobsBoundPopup" width="30%" center> <!-- 穿梭框 --> <div class="row"> &lt
Vue2 实现时空穿梭框功能模块
sophycentre的博客
09-09 484
https://www.cnblogs.com/Yanss/p/10133606.html ChangeBox.vue <template> <div class="container"> <Row> <i-col span="5"> <change-box-area :title="sourceT...
vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
06-03
要使用 Element Transfer 实现 AJAX 请求数据和自定义查询，你需要进行以下步骤： 1. 使用 Element Transfer 组件，并在 data 中定义左侧列表数据和右侧列表数据，如下所示： ``` v-model="transferData" :...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奋斗的小鸟鸟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值