el-transfer 穿梭框

用到了jquery,所以需要下载jquery包,"jquery": "^3.6.0" 

<template>
  <div>
    选中的{{result}}---数据
    <el-transfer v-model="result" :data="transferData" filter-placeholder="冷冻盒编号" filterable :titles="['冷冻盒', '已选冷冻盒']" :render-content="renderFunc" :props="{ label: 'boxCode', key: 'id' }" :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
        }">
    </el-transfer>
  </div>

</template>

<script>
import $ from 'jquery'
export default {
  data () {
    return {
      result: [],
      transferData: [], // 穿梭框数据
      renderFunc (h, option) {
        return <div class="item-box">
          <div class="item-left">{option.boxCode}</div>
          <div class="item-right">{option.boxType}</div>
        </div>
      }
    }
  },
  mounted () {
    setDom()
    this.getTable()
  },
  methods: {
    // 查询盒子规格列表
    async getTable () {
      let list = [
        {
          boxCode: 'BOX00002652A1',
          id: 11,
          boxType: 1
        },
        {
          boxCode: 'BOX00002652A2',
          id: 12,
          boxType: 2
        },
        {
          boxCode: 'BOX00002652A3',
          id: 13,
          boxType: 3
        },
        {
          boxCode: 'BOX00002652A4',
          id: 14,
          boxType: 4
        },
        {
          boxCode: 'BOX00002652A5',
          id: 15,
          boxType: 5
        }
      ]
      list.map((item) => {
        item.boxType === 5 ? item.boxType = '6*6' : ''
        item.boxType === 1 ? item.boxType = '6*8' : ''
        item.boxType === 2 ? item.boxType = '8*12' : ''
        item.boxType === 3 ? item.boxType = '9*9' : ''
        item.boxType === 4 ? item.boxType = '10*10' : ''
      })
      this.transferData = list

    }
  }
}
function setDom () {
  const html = `<div class="he-box">
        <div class="he-left">冷冻盒编号</div>
        <div class="he-right">冷冻盒规格</div>
    </div>`
  $('div.el-transfer-panel__filter').after(html)

}
</script>

<style lang="less" scoped>
/deep/ .el-transfer-panel__filter {
  margin-bottom: 5px;
}
/deep/ .el-transfer-panel {
  width: 239px !important;
}
/deep/ .he-box {
  display: flex;
  padding: 0 10px;
  justify-content: space-between;
}
/deep/ .item-box {
  display: flex;
  justify-content: space-between;
}
/deep/ .el-transfer-panel__body {
  height: 300px;
  .el-transfer-panel__list.is-filterable {
    height: 240px;
    padding-bottom: 15px;
  }
  .el-checkbox {
    margin-right: 10px;
    padding-left: 10px;
  }
}
/deep/ .el-transfer__buttons {
  padding: 0 10px;
}
/deep/ .el-transfer-panel {
  border: 1px solid #dcdfe6;
}
/deep/
  .el-transfer-panel
  .el-transfer-panel__header
  .el-checkbox
  .el-checkbox__label {
  font-size: 13px;
}
</style>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/473149.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

全网最详细介绍如何实现图片存储阿里OSS实现资源持久化存储

什么是阿里云OSS 阿里云OSS&#xff08;Object Storage Service&#xff0c;对象存储服务&#xff09;是阿里云提供的一种存储服务&#xff0c;它支持任意类型的数据存储&#xff0c;如图片、视频、日志文件等。OSS以对象&#xff08;Object&#xff09;的形式组织数据&#x…

【深度学习】手动实现RNN循环神经网络

&#x1f33b;个人主页&#xff1a;相洋同学 &#x1f947;学习在于行动、总结和坚持&#xff0c;共勉&#xff01; 目录 01 回顾 02 RNN神经网络原理 03 RNN神经网络实现 04 RNN神经网络实验 RNN的特别结构使得RNN具备了短期记忆能力&#xff0c;使其能够学习部分语义信息…

Teamcenter自定义Send To命令列表

需求 在TC中&#xff0c;选中目标后&#xff0c;右击&#xff0c;出现"Send To"&#xff0c;有时候需要对其进行添加或删减。以隐藏“Validation Manager”为例。 技术细节 进入“Command Suppression”应用。 设置需要隐藏的命令&#xff0c;以隐藏“Validation…

全栈的自我修养 ———— 微信小程序开发电脑测试api请求正常,移动端请求异常!!

小编今天也是在电脑测试时候发送请求http到服务器是可以通的&#xff0c;但是到了手机端就不可以了&#xff0c;经过小编仔细钻研&#xff0c;终于发现了以下问题&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff0…

数据库学习之关系数据库与关系

2.1关系数据库与关系 1. 什么是数据模型&#xff1f;什么是关系数据模型 数据模型是对现实世界物体的一种抽象&#xff0c;是严格定义的一组概念的集合&#xff0c;这些概念精确描述了物体的静态特性&#xff0c;动态特性和完整性约束。 静态特性&#xff1a;数据结构 动态特…

Java - 数组 Array

一、概念 结构是一种线性表&#xff08;元素排列成直线的结构&#xff09;&#xff0c;创建数组会开辟一块连续的内存空间&#xff0c;长度固定无法更改&#xff0c;元素可以重复且只能是同一种类型&#xff08;Object类型数组除外&#xff09;。优点查询快&#xff1a;由于元…

二手手机回收平台系统|基于JSP技术+ Mysql+Java+ B/S结构的二手手机回收平台系统设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java&#xff0c;ssm&#xff0c;springboot的平台设计与实现项目系统开发资源&#xff08;可…

代码中加了@ApiModelProperty注解,swagger不显示注释?

前言 今天接了一个需求&#xff0c;因为只是涉及到字段内容的更改&#xff0c;就把以前的接口copy过来&#xff0c;只改了一个sql。结果后面和前端联调的时候&#xff0c;前端告诉我swagger返回的字段没有注释&#xff0c;我寻思我家里swagger的注解&#xff0c;为什么没显示呢…

类和对象详解

目录 1.面向对象 1.1什么是面向对象 1.2与面向过程的比较 2类的定义和使用 2.1简单认识类 2.2类的定义格式 2.3类的实例化 2.3.1什么是实例化 2.3.2类和对象的说明 2.3.3this关键字 2.3.4什么是this引用 2.3.5this引用的特性 3.对象的构造和实例化 3.1对象的初始化…

AIOCR:AI文字识别web集成系统@Kylin+RISCV

基于kotti_ai的AI文字识别web集成系统 AIOCR项目目标&#xff1a; 在KylinRISCV搭建一个kotti_ai构架的网站&#xff0c;提供AI OCR文字识别web服务。 二期目标&#xff1a;在AIOCR的基础上提供chatgpt和文心一言等大模型调用&#xff0c;建立综合大模型应用平台。 功能&am…

【链表】算法例题

目录 八、 链表 57. 环形链表 ① 58. 两数相加 ② √ 59. 合并两个有序链表 ① √- 60. 随机链表的复制 ② 61. 反转链表II ② 62. K个一组翻转链表 ③ 63. 删除链表的倒数第N个结点 ② √- 64. 删除排序链表中的重复元素II ② √- 65. 旋转链表 ② √- 66. 分隔链…

腾讯云服务器如何购买省钱?2024年优惠券和优惠活动整理

腾讯云代金券领取渠道有哪些&#xff1f;腾讯云官网可以领取、官方媒体账号可以领取代金券、完成任务可以领取代金券&#xff0c;大家也可以在腾讯云百科蹲守代金券&#xff0c;因为腾讯云代金券领取渠道比较分散&#xff0c;腾讯云百科txybk.com专注汇总优惠代金券领取页面&am…

基于torch.compile和gptfast代码风格实现ChatGLM模型推理加速

目录 一、ChatGLM模型代码重构迁移 二、推理的代码重构 三、效果分析对比 参考文章 torch2.0发布以后模型训练和推理可以实现一行代码加速&#xff0c;试用之后发现效果并不明显。随后gptfast项目也发布&#xff0c;表明它确实是可以实现模型推理的加速&#xff0c;看来之前…

c/c++ 深拷贝和浅拷贝

深拷贝与浅拷贝 深拷贝&#xff08;Deep Copy&#xff09;和浅拷贝&#xff08;Shallow Copy&#xff09;是对象复制的两种不同方式&#xff0c;它们涉及到对象成员数据的复制方式和内存管理。 浅拷贝&#xff08;Shallow Copy&#xff09;&#xff1a; 浅拷贝是指将一个对象的…

投资400亿美元!人工智能或将诞生超级大国

据外媒报道&#xff0c;沙特阿拉伯政府计划设立约 400 亿美元的基金来投资人工智能&#xff0c;如此规模的基金将成为迄今为止全球最大的专注于人工智能发展的基金之一。 据知情人士透露&#xff0c;该基金长期以来一直被硅谷用来为科技初创企业提供资金&#xff0c;甚至一度是…

在线教育话术(1W字精选)

产品结构图 Nginx实现代理 问&#xff1a;我们在本机的host文件中配置了域名映射&#xff0c;都是同一个服务器。我们只需要输入对应的域名就可以到对应的界面&#xff0c;这是怎么实现的&#xff1f; 答&#xff1a;主要就是通过Nginx反向代理来实现的&#xff0c;Nginx会先…

【go语言开发】性能分析工具pprof使用

本文主要介绍如何在项目中使用pprof工具。首先简要介绍pprof工具的作用&#xff1b;然后介绍pprof的应用场景&#xff0c;主要分为工具型应用和服务型应用。最后数据分析项目&#xff0c;先采集项目信息&#xff0c;再可视化查看 文章目录 前言应用场景工具型应用服务型应用 数…

基于补丁方式修复 nginx漏洞 缓冲区错误漏洞(CVE-2022-41741)、越界写入漏洞(CVE-2022-41742)

nginx1.22.0版本漏洞 CVE-2022-41741 、CVE-2022-41742 漏洞描述 1、nginx 缓冲区错误漏洞(CVE-2022-41741) 此插件基于版本检测&#xff0c;有可能误报&#xff0c;未开启 MP4 模块的nginx属于误报&#xff0c;请忽略该漏洞。Nginx是美国Nginx公司的一款轻量级Web服务器/反…

Jmeter Ultimate Thread Group 和 Stepping Thread Group

线程组&#xff1a;使用复杂场景的性能测试 有时候我们做性能测试时&#xff0c;只依靠自带的线程组&#xff0c;显示满足不了性能测试中比较复杂的场景&#xff0c;下面这两种线程组可以帮助你很好的完成复杂的场景 第一种&#xff1a;Stepping Thread Group 在取样器错误后…

2024年【安全员-C证】考试资料及安全员-C证新版试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 安全员-C证考试资料是安全生产模拟考试一点通生成的&#xff0c;安全员-C证证模拟考试题库是根据安全员-C证最新版教材汇编出安全员-C证仿真模拟考试。2024年【安全员-C证】考试资料及安全员-C证新版试题 1、【多选题…