举例:
<div class="grid-item"><h3>日数据</h3><el-table :data="dailyData" v-loading="loading"><el-table-column label="销售姓名" align="center" prop="salesName" /><el-table-column label="订单数量" align="center" prop="orderCount" /><el-table-column label="标准订单金额" align="center" prop="standardAmount" /><el-table-column label="预存订单金额" align="center" prop="prestoreAmount" /><el-table-column label="非标订单金额" align="left" prop="nonstandardAmount" width="110"><template v-slot="scope"><el-input class="compact-input"@change="nonstandardAmountKeyUp(scope.row, 'nonstandardAmount')"placeholder="请输入非标订单金额"v-model="scope.row.nonstandardAmount"></el-input></template></el-table-column><el-table-column label="总金额" align="center" prop="totalAmount" /></el-table></div>
表格中有非标订单金额字段输入框,导致把行高撑大
查看可知是输入框和表格有外边距padding。
这时候我们可以强行修改表格的外边距使用:::v-deep .el-table--medium .el-table__cell{padding:3px}或/v-deep/ .el-table--medium .el-table__cell{padding:3px}。
el-table--medium .el-table__cell这个就相当于表格定义的class
::v-deep这个是深度修改