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.hqwc.cn/news/325166.html

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

相关文章

Netplan介绍

1 介绍 1.1 简介 Netplan是一个抽象网络配置描述器。通过netplan命令&#xff0c;你只需用一个 YAML文件描述每个网络接口所需配置。netplan并不关系底层管理工具是NetworkManager还是networkd。 它是一个在 Linux 系统上进行网络配置的实用程序。您创建所需接口的描述并定义…

频率域滤波图像复原之带阻滤波器的python实现——数字图像处理

原理&#xff1a; 带阻滤波器&#xff08;Band-Stop Filter&#xff09;是一种在信号处理领域常用的滤波器&#xff0c;它的主要功能是去除&#xff08;或减弱&#xff09;信号中特定频率范围内的成分&#xff0c;同时允许其他频率范围的信号通过。这种滤波器在多种应用中都非…

Simply简洁博客主题源码 | EmlogPro主题模版

Simply是一款简约风格的Emlog博客模板&#xff0c;响应式布局、界面简单大方&#xff0c;实用性强&#xff01; 支持夜间模式&#xff0c;采用localStorage存储配置。IOS系统下支持随系统自动切换浅/深色模式。 文章页支持显示文章字数及阅读时间。 支持http/https 响应式主…

UICollection Compositional Layout全详解

本文字数&#xff1a;8325字 预计阅读时间&#xff1a;45分钟 01 Collection View Layout全详解 UICollectionView在iOS中是构建复杂布局的强大工具。iOS13中引入的 UICollectionViewCompositionalLayout为创建自定义布局提供了全新的可能性。本文将深入探讨Compositional Lay…

04、Kafka ------ CMAK 各个功能的作用解释(Cluster、集群、Broker、位移主题、复制因子、领导者副本、主题)

目录 启动命令&#xff1a;CMAK的用法★ 在CMAK中添加 Cluster★ 在CMAK中查看指定集群★ 在CMAK中查看 Broker★ 位移主题★ 复制因子★ 领导者副本和追随者副本★ 查看主题 启动命令&#xff1a; 1、启动 zookeeper 服务器端 小黑窗输入命令&#xff1a; zkServer 2、启动 …

Python基础知识总结2——python中的字符串

python字符串 字符串基本特点空字符串和len()函数转义字符字符串拼接字符串复制不换行打印从控制台读取字符串replace() 实现字符串替换str()实现数字转型字符串使用[]提取字符字符串切片slice操作split()分割和join()合并字符串驻留机制和字符串比较字符串比较和同一性成员操作…

Redis:原理速成+项目实战——初识Redis、Redis的安装及启动、Redis客户端

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;首期文章 &#x1f4da;订阅专栏&#xff1a;Redis速成 希望文章对你们有所帮助 在此之前&#xff0c;我做过的项目里面也用到了…

Spring Boot依赖版本声明

链接 官网 Spring Boot文档官网&#xff1a;​​​​​​https://docs.spring.io/spring-boot/docs/https://docs.spring.io/spring-boot/docs/ Spring Boot 2.0.7.RELEASE Spring Boot 2.0.7.RELEASE reference相关&#xff1a;https://docs.spring.io/spring-boot/docs/2.…

排序算法——关于快速排序的详解

目录 1.基本思想 2.基本原理 2.1划分思想 2.2排序过程 &#xff08;1&#xff09;选择基准值 &#xff08;2&#xff09;分割过程&#xff08;Partition&#xff09; &#xff08;3&#xff09;递归排序 &#xff08;4&#xff09;合并过程 2.3具体实例 2.4实现代码 2.5关键要…

从细菌基因组中提取噬菌体变异序列工具PhaseFinder的介绍、安装和使用方法

PhaseFinder ## 概览&#xff0c;不翻译了&#xff0c;大家自己看吧 The PhaseFinder algorithm is designed to detect DNA inversion mediated phase variation in bacterial genomes using genomic or metagenomic sequencing data. It works by identifying regions flank…

windows通过ssh连接Liunx服务器并实现上传下载文件

连接ssh 输入&#xff1a;ssh空格用户名ip地址&#xff0c;然后按Enter 有可能出现下图提示&#xff0c;输入yes 回车即可 输入 password &#xff0c;注意密码是不显示的&#xff0c;输入完&#xff0c;再按回车就行了 以上是端口默认22情况下ssh连接&#xff0c;有些公司它…

Docker一键极速安装Nacos,并配置数据库!

1 部署方式 1.1 DockerHub javaedgeJavaEdgedeMac-mini ~ % docker run --name nacos \ -e MODEstandalone \ -e JVM_XMS128m \ -e JVM_XMX128m \ -e JVM_XMN64m \ -e JVM_MS64m \ -e JVM_MMS64m \ -p 8848:8848 \ -d nacos/nacos-server:v2.2.3 a624c64a1a25ad2d15908a67316d…