修改vue element Transfer 穿梭框里内容区的宽度
<template>
<el-transfer v-model="value1" :data="data"></el-transfer>
</template>
步骤:
1.在界面工程的文件夹下搜索transfer,找到transfer组件的文件夹,有两个文件。
2.在工程中全文搜索.el-transfer-panel,找到定义这个类的地方,修改宽度。
3.在\vue-admin-master\node_modules\_element-ui@2.4.6@element-ui\lib\theme-chalk\index.css搜索.el-transfer-panel这个类
4.位置为第三个.el-transfer-panel,将width从200px改成width:300px;
5.亦可在控制台测试判定其宽度的类,确定为.el-transfer-panel,再反向搜索.el-transfer-panel的位置进行修改。
修改vue element Transfer 穿梭框里内容区的宽度的更多相关文章
- vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询 基于element Transfer http://element-cn.eleme.io/#/zh-CN/comp ...
- Ant Design Pro中Transfer穿梭框的实际用法(与后端交互)
Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant ...
- 在微信框架模块中,基于Vue&Element前端的事件和内容的管理
在微信后台管理中,我们需要定义好菜单对应的事件管理,因为微信通过菜单触发相关的事件,因此菜单事件的响应关系,我们如果处理好,就能构建出我们的微信应用入口了.通过入口,我们可以响应用户菜单的事件,如响应 ...
- vue Transfer 穿梭框
Element Transfer组件默认支持单个list的穿梭 现业务需要支持两个list,效果如下 实现思路: 1.有选中才可穿梭 2.已穿梭源数据减少.目标增加(双向) 边界条件: 存储旧List ...
- Transfer 穿梭框
基础用法 Transfer 的数据通过 data 属性传入.数据需要是一个对象数组,每个对象有以下属性:key 为数据的唯一性标识,label为显示文本,disabled 表示该项数据是否禁止转移.目 ...
- Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮
Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区. ...
- * CSS 视觉格式化(基本框、包含块、盒模型、水平格式化、垂直格式化、行布局、em框、内容区、行间距、行内框、行框)
前言 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的 ...
- vue+element下拉框样式的点击按钮
项目中点击按钮实在太多了,怎么办呢?我们就可以将它们制作成像下拉框那样的类似操作 1.HTML样式部分:关键点在于command 方法和属性 1 <el-dropdown 2 size=&quo ...
- vue+element 中 el-input框 限制只能输入数字及一位小数
仅个人经验,希望能帮到有需要的人. 第一次写 就话不多说了直接上代码. <el-input @keyup.native="proving(index)" v-model=&q ...
随机推荐
- 微信小程序自定义导航栏
微信小程序需要自定义导航栏,特别是左上角的自定义设置,可以设置返回按钮,菜单按钮,配置如下: 1.在app.json的window属性中增加: navigationStyle:custom 顶部导航栏 ...
- jquery监听video标签视频播放暂停状态
由于jquery中没有video的paly,pause方法,所以在使用jquery来控制视频的播放的播放状态时会出现问题 之前的代码: let $video = $('#video'); $('.pl ...
- Kubernetes 笔记 05 yaml 配置文件详解
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Hi,大家好, ...
- 微信扫码登录(3)---授权码code获取用户基本信息
授权码code获取用户基本信息 上一遍已经获得微信回调的code,网址:回调获取code 那这篇通过code和其它参数去获得用户基本信息. 1.UserServiceImpl关键代码 @Ove ...
- Javascript基本类型回顾
本文是学习和总结ECMAScript5.1规范形成的.是对规范中所提及的Javascript类型进行剖析后的个人观点的表达(如有Bug望各位道友指正).主要是各类型的实例方法,不包含任务构造函数的方法 ...
- 学习-xlsxwriter模块
Xlsx是python用来构造xlsx文件的模块,可以向excel2007+中写text,numbers,formulas 公式以及hyperlinks超链接. 可以完成xlsx文件的自动化构造,包括 ...
- ASP.NET Core WebAPI中的分析工具MiniProfiler
介绍 作为一个开发人员,你知道如何分析自己开发的Api性能么? 在Visual Studio和Azure中, 我们可以使用Application Insight来监控项目.除此之外我们还可以使用一个免 ...
- Android--逐帧动画FrameAnimation
前言 开门见山,本篇博客讲解一下如何在Android平台下播放一个逐帧动画.逐帧动画在Android下可以通过代码和XML文件两种方式定义,本篇博客都将讲到,最后将以一个简单的Demo来演示两种方式定 ...
- Unix程序员的Win10二三事
macOS延续自BSD Unix, Linux则是从内核开始重新编写但延续Unix使用方式的Unix.所以mac还有linux程序员,一般都算是*nix程序员,尽管其中还有不少的区别. Windows ...
- RxJS 实现摩斯密码(Morse) 【内附脑图】
参加 2018 ngChina 开发者大会,特别喜欢 Michael Hladky 奥地利帅哥的 RxJS 分享,现在拿出来好好学习工作坊的内容(工作坊Demo地址),结合这个示例,做了一个改进版本, ...