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。

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

相关推荐
阿登林1 天前
Vue面试项目经验分享:如何专业展示技术能力与解决问题
vue.js·经验分享·面试
黄交大彭于晏1 天前
UniApp 全局通知功能实现
前端·vue.js·uni-app
一 乐1 天前
流浪动物救助|流浪猫狗救助|基于Springboot+vue的流浪猫狗救助平台设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设
国思RDIF框架1 天前
国思RDIF低代码快速开发框架 v6.2.2版本发布
前端·vue.js·后端
小高0071 天前
深入理解 package.json:前端项目的 "身份证"
前端·javascript·vue.js
lichenyang4531 天前
Next.js 学习笔记:从约定式路由到 Tailwind、Image、Font 优雅整合。
前端·javascript·全栈
修罗-zero1 天前
vue在获取某一个div的大小,怎么确保div渲染好,内容撑开后才去获取大小
前端·javascript·vue.js
咫尺的梦想0071 天前
vue笔记(第一天)
前端·vue.js·笔记
zhougl9961 天前
NoSQL 数据库和内存数据库 - MongoDB简单了解
java·前端·javascript
爱学习的马喽1 天前
React钩子函数完全指南:从useState到useEffect的实战详解与场景剖析
前端·javascript·react.js