舉例:
<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這個是深度修改