当前位置: 首页 > news >正文

【前端】 el-form-item的label由于字数多自行换行调整

问题:

两个el-col span均为12,中间还有很大空格,

但是前面的label就是换行,不论如何调整span比例都没用

<el-row  style="display: flex; justify-content: center; ">
          <el-col :span="12" >
            <el-form-item label="签约安排时间" prop="signingScheduleTime" >
              <el-date-picker clearable
                              v-model="form.signingScheduleTime"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="请选择时间"
                             >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="签约状态">
              <el-select
                v-model="form.signingStatus"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in dict.type.sign_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

如上图,标签换行了

解决方法:

加入 label-width="auto"即可

代码如下:

        <el-row  style="display: flex; justify-content: center; ">
          <el-col :span="12" >
            <el-form-item label="签约安排时间" prop="signingScheduleTime" label-width="auto" style="margin-left: 20px">
              <el-date-picker clearable
                              v-model="form.signingScheduleTime"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="请选择时间"
                             >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="签约状态" label-width="auto">
              <el-select
                v-model="form.signingStatus"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in dict.type.sign_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

标签完整显示在一行

相关文章:

  • 常考计算机操作系统面试习题(二)(下)
  • Spring Boot深度解析:从核心原理到最佳实践
  • C语言字符函数,字符串函数以及内存函数
  • 腾讯云大模型知识引擎x deepseek:打造智能服装搭配新体验
  • Kubernetes 故障排查指南
  • Linux启动之__vet_atags
  • 23种设计模式-外观(Facade)设计模式
  • unix网络编程
  • annoy编译安装问题及解决
  • 嵌入式八股文学习笔记——C++学习笔记面向对象相关
  • Python第九章节——异常,模块与包
  • leetcode128.最长连续序列
  • Objects.equals() 和 Object.equals() 的区别:
  • 信号处理中的窗
  • 《Python实战进阶》第30集:Scikit-learn 入门:分类与回归模型
  • Pytest的参数化测试
  • Xamarin.Android实现本地化部署DeepSeek的对话功能
  • 【docker】安装SQLServer
  • DrRacket是一款专为Scheme和Racket编程语言设计的集成开发环境(IDE)
  • 重温Docker 构建
  • “五一”第三天郑州铁路局预计发送旅客76万人
  • 跳水世界杯总决赛:程子龙/朱子锋夺男子双人10米台冠军
  • 5月1日,多位省级党委书记调研旅游市场、假期安全等情况
  • 前行中的“模速空间”:要攻克核心技术,也要成为年轻人创业首选地
  • 亚马逊拟为商品标注“关税成本”,特朗普致电贝索斯讨说法
  • 摩根大通任命杜峯为亚太区副主席,加码中国市场业务布局