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,一经查实,立即删除!

相关文章

揭秘!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;客户提交…

将所有字母转化为该字母后的第三个字母,即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…

配置MMDetection的solov2攻略整理

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

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命令…

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

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

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…

基于ssm学生学籍管理系统设计与实现+vue论文

目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容 2 2 系统开发环境 3 2.1 vue技术 3 2.2 JAVA技术 3 2.3 MYSQL数据库 3 2.4 B/S结构 4 2.5 SSM框架技术 4 3 系统分析 5 3.1 可行性分析 5 3.1.1 技术可行性 5 3.1.2 操作可行性 5 3…

C语言:指针(二)

目录 1.数组名的理解2.使用指针访问数组3.一维数组传参的本质4.二级指针5.指针数组6.字符指针变量7.数组指针变量8.二维数组传参的本质9.函数指针变量10.函数指针数组11.回调函数12.qsort函数13.使用回调函数模拟实现qsort函数 1.数组名的理解 int main() {int arr[] { 1,2,3…

Unity(第十八部)物理力学,碰撞,触发、关节和材质

1、重力 刚体组件 英文中文描述RigidBody刚体组件physics->rigidbody &#xff0c;刚体组件使一个物体有了质量&#xff0c;重力等。&#xff0c;use gravity 勾选后&#xff0c;物体才会受到重力&#xff0c;会自动下落&#xff0c;取消勾选就不会。&#xff0c;&#xf…

selenuim[1]($x(‘xpath语法’)、WebDriverWait())

文章目录 初学selenuim记录1、执行driver webdriver.Chrome()后很久才打开浏览器2、浏览器多元素定位 $x(‘xpath语法’)3、打开浏览器driver.get("网址")执行了很久才开始定位元素&#xff1a;等待&#xff08;1&#xff09;driver.set_page_load_timeout(t)&#…

超越CPU和GPU:引领AI进化的LPU

什么是CPU CPU&#xff08;Central Processing Unit&#xff09;是由数十亿个晶体管构成的&#xff0c;可以拥有多个处理核心&#xff0c;通常被称为计算机的“大脑”。它对所有现代计算系统至关重要&#xff0c;因为它执行计算机和操作系统所需的命令和进程。CPU在决定程序运…

【Linux C | 网络编程】gethostbyaddr 函数详解及C语言例子

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

JavaSE面试——hashcode和equals

对象调用 hashCode 方法后&#xff0c;会返回一串 int 类型的数字码 java 规定&#xff1a; 1. 两个对象的 hashCode() 相等&#xff0c;那他们的 equals() 不一定相等 2. 两个对象的 equals() 相等&#xff0c;那他们的 hashCode() 必定相等 3. 重写 equals() 方法时一定要…

三天学会阿里分布式事务框架Seata-SpringCloud Alibaba分布式基础案例搭建

锋哥原创的分布式事务框架Seata视频教程&#xff1a; 实战阿里分布式事务框架Seata视频教程&#xff08;无废话&#xff0c;通俗易懂版&#xff09;_哔哩哔哩_bilibili实战阿里分布式事务框架Seata视频教程&#xff08;无废话&#xff0c;通俗易懂版&#xff09;共计10条视频&…