Element ui 改变el-transfer 穿梭框的大小

  • 修改el-transfer 左右两个穿梭框的高度和宽度,具体效果如下
  • 正常大小的穿梭框1
  • 修改之后的,主要在style中加上如下样式即可
    2
/deep/ .el-transfer-panel{
width: 470px; /* 左右两个穿梭框的高度和宽度 */
height: 450px;
}
/deep/ .el-transfer-panel__list.is-filterable {
height: 303px; /* 穿梭框列表高度 */
}
  • 全部代码如下:
<template><p style="text-align: center; margin: 50px 0 20px">使用 scoped-slot 自定义数据项</p><div style="text-align: center"><el-transferstyle="text-align: left; display: inline-block"v-model="value4"filterable:left-default-checked="[2, 3]":right-default-checked="[1]":titles="['Source', 'Target']":button-texts="['到左边', '到右边']":format="{noChecked: '${total}',hasChecked: '${checked}/${total}'}"@change="handleChange":data="data"><span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span><el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button><el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button></el-transfer></div>
</template><style>.transfer-footer {margin-left: 20px;padding: 6px 5px;}/deep/ .el-transfer-panel{width: 470px; /* 左右两个穿梭框的高度和宽度 */height: 450px;
}
/deep/ .el-transfer-panel__list.is-filterable {height: 303px; /* 穿梭框列表高度 */
}
</style><script>export default {data() {const generateData = _ => {const data = [];for (let i = 1; i <= 15; i++) {data.push({key: i,label: `备选项 ${ i }`,disabled: i % 4 === 0});}return data;};return {data: generateData(),value: [1],value4: [1],renderFunc(h, option) {return <span>{ option.key } - { option.label }</span>;}};},methods: {handleChange(value, direction, movedKeys) {console.log(value, direction, movedKeys);}}};
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

element的Table表格组件树形数据与非懒加载

1.代码实现 <template><div><el-row :gutter"10" class"mb8"><el-col :span"1.5"><el-button type"info" plain icon"el-icon-sort" size"mini" click"toggleExpandAll"&g…

Java面试题之集合篇

前言 本篇主要总结JAVA面试中关于集合相关的高频面试题。本篇的面试题基于网络整理以及自己的总结编辑。在不断的完善补充哦。欢迎小伙伴们在评论区发表留言哦&#xff01; 1、基础 1.1、Java 集合框架有哪些&#xff1f; Java 集合框架&#xff0c;大家可以看看 《Java 集…

[运维|gitlab] docker Gitlab 命令行后台修改密码

参考文献 docker Gitlab 初始化账号以及密码是什么呢 修改密码 进入容器 docker exec -it gitlab bash进入bin目录 进入gitlab的bin目录 cd /opt/gitlab/bin执行命令 执行gitlab-rails console gitlab-rails console执行命令 找到root的用户&#xff0c;输入uUser.where…

【每日面试题】Docker常见面试题精选

什么是Docker容器&#xff1f; Docker容器是一种轻量级的虚拟化技术&#xff0c;可以将应用及其依赖项打包在一个可移植的容器中&#xff0c;以便在多个环境中运行。 Docker镜像和容器之间有什么区别&#xff1f; Docker镜像是一个包含了应用程序及其依赖项的只读模板&#xf…

C#上位机与欧姆龙PLC的通信10----开发专用的通讯工具软件(WPF版)

1、介绍 上节开发了一个winform版的通讯测试工具&#xff0c;这节再搞个wpf版的&#xff0c;wpf是什么&#xff1f;请自行百度&#xff0c;也可以看前面的博客&#xff0c;WPF真入门教程&#xff0c;wpf的界面效果是比winform漂亮&#xff0c;因为wpf使用了web项目中的css样式…

java发送邮件到qq邮箱

自己的授权码自己记好 引入依赖 <dependency><groupId>com.sun.mail</groupId><artifactId>javax.mail</artifactId><version>1.6.2</version> </dependency> <dependency><groupId>javax.mail</groupId>&…

Socket与TCP的关系

前言 相信大家对于TCP已经非常熟悉了&#xff0c;学习过计算机网络的同学对于它的连接和断开流程应该已经烂熟于心了吧。 那么Socket是什么&#xff1f; Socket是应用层与TCP/IP协议簇通信的中间软件抽象层&#xff0c;它是一组接口。在设计模式中&#xff0c;Socket其实就是…

车位关键点检测-车位识别-车辆识别检测(教程+代码)

车位关键点检测、车位识别和车辆识别检测是现代智能交通系统中的重要技术&#xff0c;它们在提高停车管理效率和交通流畅度方面起着重要作用。以下是对这三个技术的分点阐述&#xff1a; 1. 车位关键点检测&#xff1a; 车位关键点检测是指通过计算机视觉技术&#xff0c;自动…

Docker中镜像的相关操作

1.辅助操作 docker version&#xff1a;用查看docker客户端引擎和server端引擎版本信息。 docker info&#xff1a;用来查看docker引擎的详细信息。 docker --help&#xff1a;用来查看帮助信息。 2.镜像Image docker images&#xff1a;查看当前本地仓库中存在哪些镜像。 …

解决uniapp打包成apk后uni.getStorageSync获取不到值

uniapp写的项目&#xff0c;在hbuilderx中云打包成apk后我在登录存储的token死都获取不到&#xff0c;导致后续接口请求头没有token连接不到接口&#xff0c;只有运行到手机或者模拟器还有打包成apk后是获取不到&#xff0c;其他的小程序还有网页都可以获取到 试过了很多种方法…

【递归】C++算法:124 二叉树中的最大路径和

作者推荐 【动态规划】【字符串】扰乱字符串 本文涉及的基础知识点 递归 124. 二叉树中的最大路径和 二叉树中的 路径 被定义为一条节点序列&#xff0c;序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点&#x…

Android linphone-android sdk设置语音编码问题

1.遇到的问题 今天遇到linphone-android sdk需要解决语音编码问题&#xff0c;需要指定编码。查了下配置&#xff0c;里面没有发现类似的配置。 ## Start of factory rc # This file shall not contain path referencing package name, in order to be portable when app is r…

基于SpringBoot+thymeleaf的养老院管理系统(Java毕业设计)

大家好&#xff0c;我是DeBug&#xff0c;很高兴你能来阅读&#xff01;作为一名热爱编程的程序员&#xff0c;我希望通过这些教学笔记与大家分享我的编程经验和知识。在这里&#xff0c;我将会结合实际项目经验&#xff0c;分享编程技巧、最佳实践以及解决问题的方法。无论你是…

rtsp超分推流流程(一)

记录一下rtsp 推流的流程 播放一个RTSP的流需要如下的RTSP请求命令&#xff1a; OPTIONS -> DESCRIBE -> SETUP -> PLAY 然后就是接收RTP包、播放了 抓包分析出来&#xff0c;推流的RTSP请求命令如下&#xff1a; OPTIONS -> ANNOUNCE -> SETUP -> RECORD …

本地引入Element UI后导致图标显示异常

引入方式 npm 安装 推荐使用 npm 的方式安装&#xff0c;它能更好地和 webpack 打包工具配合使用。 npm i element-ui -SCDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源&#xff0c;在页面上引入 js 和 css 文件即可开始使用。 <!-- 引入样式 --> <…

blender Texture Coordinate Node

Texture Coordinate Node — Blender Manual Generated纹理坐标是一种自动生成的纹理坐标&#xff0c;它不需要用户指定任何UV映射或对象空间。它是基于对象的边界框的坐标&#xff0c;也就是说&#xff0c;它是根据对象的最小点和最大点来定义的。 对象的边界框是一个包围对…

使用requests发请求操作Elasticsearch【一】

本文为博主原创&#xff0c;未经授权&#xff0c;严禁转载及使用。 本文链接&#xff1a;https://blog.csdn.net/zyooooxie/article/details/123730279 之前在测试环境查es数据&#xff0c;在用 Kibana&#xff1b;可下半年&#xff0c;因为某些原因 就不能用了。我就想着用代…

[NSSRound#3 Team]This1sMysql

[NSSRound#3 Team]This1sMysql 源码 <?php show_source(__FILE__); include("class.php"); $conn new mysqli();if(isset($_POST[config]) && is_array($_POST[config])){foreach($_POST[config] as $key > $val){$value is_numeric($var)?(int)$…

【linux】日志管理和分析

一、概述 在Linux系统的管理和运维中&#xff0c;日志文件起到至关重要的作用。它们记录了系统运行过程中的各种事件&#xff0c;包括系统故障、性能数据和安全事件。 二、 日志的作用和分类 日志的作用 日志文件记载了系统的生命线&#xff0c;利用它们可以&#xff1a; 1…

ubuntu22.04 手动分区说明

主分区和逻辑分区的区别 主分区&#xff1a;主分区是硬盘分区表中的前四个分区&#xff0c;用于安装操作系统、创建引导分区等。主分区可以设置为启动分区和活动分区&#xff0c;是直接在硬盘上划分的。要在硬盘上安装操作系统&#xff0c;则硬盘必须有1个主分区。 逻辑分区&…