vue调整表格样式之深度修改
目录
vue调整表格样式之深度修改
举例：
<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这个是深度修改