控制label标签的宽度,不让它换行 label标签左对齐

简介: 控制label标签的宽度,不让它换行 label标签左对齐

1==>控制label标签的宽度。解决字段名太长时,不会换行显示


 label-width="100px"   label标签的宽度是100px;


 style="width:280px;"   表示label和input的宽度一起有280px;注意一起是280px


<el-form-item
        label="访问密码:"
        label-width="100px"
        prop="accesspassword"
        style="width:280px;  "
      >
        <el-input v-model="VideoFirst.accesspassword"></el-input>
    </el-form-item>


2==>label标签左对齐


<el-form
      :model="VideoFirst"
      :rules="rulesfrist"
      ref="VideoFirst"
      :label-position="labellocaltion"
      class="demo-ruleForm"
    >
    </el-form>


data中labellocaltion:"left"  左对齐

 

但是注意  左对齐 必须要和 label-width一起使用才有用的哦


相关文章
|
存储 缓存 前端开发
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
通过Upload组件结合react-Cropper实现图片的裁剪上传组件封装,剖析antd-img-crop源码实现的逻辑,对自己封装的组件进行进一步优化,改造!
5245 0
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
|
存储 运维 安全
磁带存储技术演进简史
磁带使用的磁颗粒的密度,被证实可线性增加。当前的LTO磁带采用钡铁氧体磁体,单盘磁带的容量可以做到220TB;而采用锶铁氧体磁体的LTO磁带,单盘容量将轻松达到580TB!LTO技术联盟正是通过改进磁体颗粒密度的方法使得每盒磁带的容量得到巨大的提升,并已经在实验室研制出单盘容量为580TB的磁带产品。
650 0
|
JavaScript
实现 Vue 框架用户短时间内多次点击同一按钮仅触发一次
使用 Vue 框架开发项目中,遇到个问题,就是在用户提交数据时,如果连续多次点击按钮,会触发多次,导致数据异常,因此需要限制用户短时间内多次点击同一按钮,只触发一次。
1275 0
实现 Vue 框架用户短时间内多次点击同一按钮仅触发一次
html2canvas 空白
html2canvas 空白
356 59
|
11月前
|
存储 缓存 前端开发
Web应用中的存储方式有哪些?
本文首发于微信公众号“前端徐徐”,介绍了几种常见的前端数据存储技术:Cookie、Web Storage(包括 localStorage 和 sessionStorage)、IndexedDB、Cache Storage 和 Memory Storage。每种技术的特点和使用场景不同,适用于不同的开发需求。文章详细解释了它们的使用方法、特点和应用场景,并提供了代码示例。
1387 2
Web应用中的存储方式有哪些?
|
10月前
|
监控 开发者 Perl
perl use HTTP::Server::Simple 轻量级 http server
使用 **HTTP::Server::Simple** 模块,Perl 开发者可以快速创建和配置一个轻量级的HTTP服务器。通过继承和扩展 `handle_request` 方法,可以实现复杂的请求处理逻辑。结合日志记录功能,可以更好地监控服务器运行情况。无论是用于开发测试还是简单的生产环境应用,这种轻量级解决方案都能提供很好的支持。
230 2
|
DataWorks 监控 安全
DataWorks产品使用合集之怎么设置实时同步任务的速率和并发
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
|
网络安全 SDN 网络虚拟化
《计算机网络简易速速上手小册》第8章:软件定义网络(SDN)与网络功能虚拟化(NFV)(2024 最新版)
《计算机网络简易速速上手小册》第8章:软件定义网络(SDN)与网络功能虚拟化(NFV)(2024 最新版)
382 2
|
JavaScript
【VUE异常】el-popconfirm失效,@confirm事件不生效,点击没有任何反应,刷新页面才能点击
【VUE异常】el-popconfirm失效,@confirm事件不生效,点击没有任何反应,刷新页面才能点击
544 0
|
缓存 前端开发 JavaScript
React中怎么实现状态自动保存(KeepAlive)?
React中怎么实现状态自动保存(KeepAlive)?
513 0