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。

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

少儿编程 中国电子学会C++等级考试一级历年真题答案解析【持续更新 已更新82题】

C 等级考试一级考纲说明 一、能力目标 通过本级考核的学生&#xff0c;能对 C 语言有基本的了解&#xff0c;会使用顺序结构、选择结构、循环结构编写程序&#xff0c;具体用计算思维的方式解决简单的问题。 二、考核目标 考核内容是根据软件开发所需要的技能和知识&#x…

Premiere Pro 2024:革新视频编辑,打造专业影视新纪元

在数字化时代&#xff0c;视频已经成为人们获取信息、娱乐消遣的重要媒介。对于视频制作者而言&#xff0c;拥有一款功能强大、易于操作的视频编辑软件至关重要。Premiere Pro 2024&#xff0c;作为Adobe旗下的旗舰视频编辑软件&#xff0c;凭借其卓越的性能和创新的特性&#…

去中心化钱包应用:数字货币时代的自由与安全之选

​小编介绍&#xff1a;10年专注商业模式设计及软件开发&#xff0c;擅长企业生态商业模式&#xff0c;商业零售会员增长裂变模式策划、商业闭环模式设计及方案落地&#xff1b;扶持10余个电商平台做到营收过千万&#xff0c;数百个平台达到百万会员&#xff0c;欢迎咨询。 随…

设计模式:六大原则 ③

一、六大设计原则 &#x1f360; 开闭原则 (Open Close Principle) &#x1f48c; 对扩展开放&#xff0c;对修改关闭。在程序需要进行拓展的时候&#xff0c;不能去修改原有的代码&#xff0c;实现一个热插拔的效果。简言之&#xff0c;是为了使程序的扩展性好&#xff0c;易…

证明高维度神经网络模型是低纬度神经网络模型的加和

神经网络中矩阵乘法的分解与应用 启发标题&#xff1a;神经网络中矩阵乘法的分解与应用摘要&#xff1a;引言&#xff1a;方法&#xff1a;实验&#xff1a;结论&#xff1a;参考文献&#xff1a;附录1附录2实验数据 启发 理论上 更具矩阵乘法 A[p,mn]B[mn,q]C[p,q] Acat(A[:,…

3分钟开通GPT-4

AI从前年12月份到现在已经伴随我们一年多了&#xff0c;还有很多小伙伴不会开通&#xff0c;其实开通很简单&#xff0c;环境需要自己搞定&#xff0c;升级的话就需要一张visa卡&#xff0c;办理visa卡就可以直接升级chatgptPLSU 一、虚拟卡支付 这种方式的优点是操作简单&…

离散系统的频率响应

离散系统的频率响应 方法一&#xff1a;利用 freqz() 方法一&#xff1a;利用\textbf{freqz()} 方法一&#xff1a;利用freqz() 方法二&#xff1a;利用自定义 freqz_m() 方法二&#xff1a;利用自定义\textbf{freqz\_m()} 方法二&#xff1a;利用自定义freqz_m() 方法一&#…

JimuReport积木报表 v1.7.1 版本发布,低代码报表工具

项目介绍 一款免费的数据可视化报表&#xff0c;含报表和大屏设计&#xff0c;像搭建积木一样在线设计报表&#xff01;功能涵盖&#xff0c;数据报表、打印设计、图表报表、大屏设计等&#xff01; Web 版报表设计器&#xff0c;类似于excel操作风格&#xff0c;通过拖拽完成报…

游戏引擎渲染流程

一、渲染概述 我们首先看到渲染技术的发展 游戏渲染面临的挑战&#xff1a; 一个容器中同一时刻有大量的游戏对象需要进行渲染&#xff0c;并且不同对象渲染的形式、算法还有所差异&#xff0c;这些使得游戏的绘制系统变得非常复杂&#xff1b;其次&#xff0c;游戏引擎的渲染…

win11下安装mysql

一、下载MySQL 官方下载传送门 我安装的版本是5.7.83 二、安装MySQL 1.双击安装包 2.选择Custom(自定义安装)&#xff0c;然后Next> 3.根据你的系统做选择&#xff0c;我的是64位&#xff0c;所选MySQL Servers 5.7.38 -x64&#xff0c;然后按箭头将选中的版本移到右边…

如何根据企业司法涉诉大数据合理规避风险?

在当前的商业环境中&#xff0c;企业司法涉诉的信息越来越成为衡量一家企业信誉和运营风险的重要标准。大数据时代的到来&#xff0c;让我们有了更加丰富的手段对这些信息进行挖掘与分析&#xff0c;从而对企业可能面临的风险进行预警。本文将探讨如何通过对企业司法涉诉的大数…

Android9-W517-使用NotificationListenerService监听通知

目录 一、前言 二、前提 三、方案 方案一 方案二 方案三 方案四 方案五 方案六 方案七 关于NotificationListenerService类头注释 四、结论 一、前言 NotificationListenerService可以让应用监听所有通知&#xff0c;但是无法获得监听通知的权限&#xff0c;如下六种…

JavaWeb JSP

JSP&#xff08;Java Server Page&#xff09;是J2EE的功能模块&#xff0c;是Java服务器页面&#xff0c;由Web服务器执行&#xff0c;作用就是降低动态网页开发难度&#xff0c;将Java代码与HTML分离&#xff0c;降低开发难度&#xff0c;本质就是Servlet。 Servlet的缺点&a…

元素水平垂直居中的方法有哪些?

文章目录 css 实现垂直水平居中实现方式利用定位margin&#xff1a;auto利用定位margin&#xff1a;负值利用定位transformtable布局flex布局grid网格布局小结有需要的请私信博主&#xff0c;还请麻烦给个关注&#xff0c;博主不定期更新组件封装和文章编写&#xff0c;或许能够…

ffmpeg使用vaapi解码后的视频如何基于x11或EGL实现0-copy渲染?

技术背景 对于ffmpeg硬解码后渲染常见的做法是解码后通过av_hwframe_transfer_data方法将数据从GPU拷贝到CPU&#xff0c;然后做一些转换处理用opengl渲染&#xff0c;必然涉及到譬如类似glTexImage2D的函数将数据上传到GPU。而这样2次copy就会导致CPU的使用率变高&#xff0c…

鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:外描边设置)

设置组件外描边样式。 说明&#xff1a; 从API Version 11开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 outline outline(value: OutlineOptions) 统一外描边样式设置接口。 卡片能力&#xff1a; 从API version 11开始&#xff0c;该…

【题解】—— LeetCode一周小结9

【题解】—— 每日一道题目栏 上接&#xff1a;【题解】—— LeetCode一周小结8 26.二叉搜索树的范围和 题目链接&#xff1a;938. 二叉搜索树的范围和 给定二叉搜索树的根结点 root&#xff0c;返回值位于范围 [low, high] 之间的所有结点的值的和。 示例 1&#xff1a; 输…

Stable Diffusion——Animate Diff一键AI图像转视频

前言 AnimateDiff 是一个实用框架&#xff0c;可以对文本生成图像模型进行动画处理&#xff0c;无需进行特定模型调整&#xff0c;即可为大多数现有的个性化文本转图像模型提供动画化能力。而Animatediff 已更新至 2.0 版本和3.0两个版本&#xff0c;相较于 1.0 版本&#xff…

MySQL 多表查询 连接查询 自连接

介绍 自连接查询&#xff0c;可以是内连接查询&#xff0c;也可以是外连接查询&#xff0c;一句话自己连接自己&#xff0c;一个表当作两个表进行连接。 语法 SELECT 字段列表 FROM 表A 别名A JOIN 表A 别名B ON 条件两个表A说明是同一张表&#xff0c;但是别名不同 案例…