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这个是深度修改