elementUI el-table中的对齐问题

用elementUI时,遇到了一个无法对齐的问题:代码如下:

<el-table :data="form.dataList" 
    <el-table-column label="验收结论" prop="checkResult" width="200">
    <template slot-scope="scope">
      <el-form-item label=' ' label-width="20px"
        :prop="'dataList.' + scope.$index + '.checkResult'" :rules="rules.checkResult">
        <el-selectv-model="scope.row.checkResult">
          <el-option v-for="dict in dict_check_result" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
    </template>
  </el-table-column>

  <el-table-column label="备注" prop="emarks" width="200">
    <template slot-scope="scope">
        <el-input v-model="scope.row.remarks" placeholder="请输入备注" />
    </template>
  </el-table-column>
</el-table>

显示如下:输入框无论如何也无法对齐,写css或者style也不响应。

解决方法:

    仔细观察:原来是“验收结论”有验证规,不符合时需要显示提示信息,所以多出了一些空间。在标签中多出<el-form-item>, 考虑在备注中也加入这个标签。改正后如下:用红字标出加入部分。

<el-table :data="form.dataList" 
    <el-table-column label="验收结论" prop="checkResult" width="200">
    <template slot-scope="scope">
      <el-form-item label=' ' label-width="20px"
        :prop="'dataList.' + scope.$index + '.checkResult'" :rules="rules.checkResult">
        <el-selectv-model="scope.row.checkResult">
          <el-option v-for="dict in dict_check_result" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
    </template>
  </el-table-column>

  <el-table-column label="备注" prop="contractRemarks" width="200">
       <template slot-scope="scope">
            <el-form-item label=' ' label-width="20px" :prop="'List.' + scope.$index + '.remarks'" >
               <el-input v-model="scope.row.remarks" placeholder="请输入备注" />
            </el-form-item>
        </template>
     </el-table-column>
</el-table>

刷新页面,试看结果OK。

解决的方法怪怪的,但确是一种解决方法。

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

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

相关文章

0005TS函数类型详解

TypeScript 中的函数类型用于为函数定义参数类型和返回值类型。这提供了一个清晰的契约&#xff0c;指明函数应该如何被调用和期望返回什么类型的结果。以下是 TypeScript 中函数类型的一些基本用法和概念&#xff1a; 函数声明 在 TypeScript 中&#xff0c;你可以为函数的参…

揭秘!Excel如何成为职场中的价值创造利器

文章目录 一、Excel在生产力提升中的作用二、Excel在创造价值方面的应用案例三、Excel实用技巧分享四、Excel与其他工具的协同应用五、Excel学习的建议与展望《Excel函数与公式应用大全》亮点内容简介作者简介目录 在当今信息爆炸的时代&#xff0c;数据处理和分析能力已成为职…

AI智能分析网关V4智慧商场方案,打造智慧化商业管理生态

AI智能视频检测技术在商场楼宇管理中的应用越来越广泛。通过实时监控、自动识别异常事件和智能预警&#xff0c;这项技术为商场管理提供了更高效、更安全的保障。今天我们以TSINGSEE青犀视频AI智能分析网关为例&#xff0c;给大家介绍一下AI视频智能分析技术如何应用在商场楼宇…

抢单情况下的均衡分配机制

背景&#xff1a; 1、工单有多种类型。 2、客户提交工单。 3、不同客服受理不同类型工单&#xff0c;受理工单类型存在交叉。 4、按照类型维度实现均衡分配。 方案&#xff1a; 1、为每种类型创建一个工单池&#xff0c;使用队列&#xff0c;左进右出&#xff1b;客户提交…

Android AIDL RemoteCallbackLIst

RemoteCallbackLIst 参考地址 RemoteCallbackList 是 Android SDK 中的一个类&#xff0c;用于帮助管理进程之间的回调。它专为进程间通信 (IPC) 场景而设计&#xff0c;在该场景中&#xff0c;应用程序的不同部分甚至不同的应用程序可能在不同的进程中运行。 以下是其关键功能…

将所有字母转化为该字母后的第三个字母,即A->D,B->E

//编写加密程序&#xff0c;规则&#xff1a;将所有字母转化为该字母后的第三个字母&#xff0c;即A->D,B->E,C->F,…Y->B,Z->C //小写字母同上&#xff0c;其他字符不做转化。输入&#xff1a;I love 007 输出&#xff1a;L oryh 007 代码&#xff1a; #inc…

GVA快速使用

1. clone 代码&#xff0c; 使用goland打开Server目录&#xff0c; 使用vsc打开前端web目录&#xff0c;运行后端&#xff0c;前端 gin-vue-admin后台管理系统 - 知乎 (zhihu.com) 2.了解端口配置 参考&#xff0c; 基于Go的后台管理框架Gin-vue-admin_go vue admin-CSDN博客…

配置MMDetection的solov2攻略整理

目录 一、MMDetection 特性 常见用法 二、ubuntu20.04配置solov2 三、Windows11配置solov2 一、MMDetection MMDetection是一个用于目标检测的开源框架&#xff0c;由OpenMMLab开发和维护。它提供了丰富的预训练模型和模块&#xff0c;可以用于各种目标检测任务&#xff…

kamacoder 11.共同祖先的C语言奇妙解法

11. 共同祖先 时间限制&#xff1a;1.000S 空间限制&#xff1a;32MB 题目描述 小明发现和小宇有共同祖先&#xff01;现在小明想知道小宇是他的长辈&#xff0c;晚辈&#xff0c;还是兄弟。 输入描述 输入包含多组测试数据。每组首先输入一个整数N&#xff08;N<10&a…

redis的基本数据类型(一)

redis的基本数据类型 1、redis1.1、数据库分类1.2、NoSQL分类1.3、redis简介1.4、redis应用1.5、如何学习redis 2、redis的安装2.1、Windows安装2.2.1、客户端redis管理工具 2.2、Linux安装&#x1f525;2.2.1、redis核心文件2.2.2、启动方式2.2.3、redis桌面客户端1、redis命令…

定义类的成员比较函数,并在类的成员函数里面调用

定义一个自定义排序规则的成员函数&#xff0c;然后在类的成员函数中调用 文章目录 1.声明为static函数2.使用function3.使用匿名函数 1.声明为static函数 #include <iostream> #include <algorithm> #include <list> class A { public:A(){std::list<i…

Python进阶学习:Pickle模块--dump()和load()的用法

Python进阶学习&#xff1a;Pickle模块–dump()和load()的用法 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望得到您…

MyBatis-Plus 框架中的自定义元对象处理器

目录 一、代码展示二、代码解读 一、代码展示 package com.minster.yanapi.handler;import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler; import org.apache.ibatis.reflection.MetaObject; import org.springframework.stereotype.Component;import java.util…

JavaScript解构赋值--数组解构赋值与对象解构赋值

前言 解构赋值是JavaScript的一个强大特性&#xff0c;允许从数组或对象中提取数据&#xff0c;并赋值给定义的变量。 对象解构 直接根据属性名来解构赋值&#xff1a; const person { name: 张三, age: 30 };const { name, age } person;console.log(name); console.lo…

动态路由使用

目录 添加动态路由 添加单个路由 添加多个路由 指定路由添加的位置 导航守卫添加路由 删除动态路由 添加动态路由 添加动态路由的方法有两个&#xff1a;addRoutes&#xff08;添加多个路由&#xff09;和addRoute&#xff08;添加单个路由&#xff09;&#xff0c;但是a…

ASO 对App产品性能的影响

可发现性 拥有出色的App还不足以让人们发现它&#xff0c;ASO技术通过提高搜索排名来增强App的可发现性。当用户可以在搜索结果中轻松找到应用程序时&#xff0c;那么下载和成功的潜力就会飙升。 设定期望 实施有效的应用商店优化不仅可以为潜在用户建立正确的期望&#xf…

东方通 | 基于TongWeb中间件适配改造实战

东方通 一、东方通[Tong Web] 简介 ​为了方便地开发、部署、运行和管理Internet上基于三层/多层结构的应用&#xff0c;需要以基于组件的底层技术为基础&#xff0c;规划一个整体的应用框架&#xff0c;提供相应的支撑平台&#xff0c;作为Internet应用的基础设施&#xff0…

每日一类:Qt GUI开发的基石《QWidget》

深入探索QWidget&#xff1a;Qt GUI开发的基石 在Qt框架中&#xff0c;QWidget类扮演着构建图形用户界面&#xff08;GUI&#xff09;的基础角色。它不仅提供了窗口的基本功能&#xff0c;还允许开发者通过继承和定制来创建各式各样的用户界面元素。本文将详细介绍QWidget的关…

白酒:传统酿造工艺与现代科技相结合的创新实践

在云仓酒庄豪迈白酒的生产过程中&#xff0c;传统酿造工艺与现代科技的结合是推动产业发展的重要动力。云仓酒庄作为一家注重创新与实践的酒庄&#xff0c;在这方面进行了许多有益的探索和尝试。 首先&#xff0c;传统酿造工艺是云仓酒庄豪迈白酒的灵魂。在长期的生产实践中&am…

抽丝剥茧!API在互联网金融领域里大显身手:深度解锁三大创新应用场景

&#x1f680; 引言 有这么一位幕后高手&#xff0c;它不显山露水却能牵动整个互联网金融江湖的脉搏&#xff0c;它在无形中编织数据网络&#xff0c;如同枢纽般连通各方资源&#xff0c;在静默中推动创新进程&#xff0c;这就是大名鼎鼎的API&#xff08;应用程序接口&#x…