记一个el-dialog弹窗修改el-select和el-date-picker输入框样式的坑

记一个el-dialog弹窗修改el-select和el-date-picker输入框样式的坑

要求是dialog弹窗上有两个输入框，领导觉得样式不好看需要修改输入框的样式

样子大概是这样的：

这个样式在全局修改很简单，网上有很多方式
这里我要采用的是在scoped中避免污染全局，做法如下

 <!-- 弹出框 -->
    <el-dialog
      :append-to-body="false"
      title="请选择要查看的省份及日期"
      :visible.sync="dialogVisible"
      @closed="onClosed"
      width="40%"
    >
      <div class="block">
        <el-form :model="lookForm" :rules="lookRules" ref="lookForm" label-width="100px">
          <el-form-item label="选择省份：" required>
            <el-select
              filterable
              class="picker-box"
              prop="province"
              v-model="lookForm.province"
              placeholder="请选择省份"
              @change="onRegionChange"
            >
              <el-option v-for="item in provinceList" :key="item.adcode" :label="item.name" :value="item.adcode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="查看日期：" required>
            <el-date-picker
              prop="day"
              class="picker-box"
              v-model="lookForm.day"
              type="date"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmView">确认查看</el-button>
      </span>
    </el-dialog>

  <style lang="scss" scoped>
   .block {
    text-align: center;
    .picker-box {
      width: 100%;
      ::v-deep .el-input__inner { // 此处深度穿透修改样式
        border: none;
        border-radius: 0;
        padding-bottom: 1px;
        border-bottom: 1px solid #ccc;
      }
    }
  }
  </style>

以上