el-date-picker无法100% el-date-picker整行显示

101

网上的解决方法(我试着无效):

element ui的el-date-picker默认宽度不是100%,只在控件设置width=100%也不行,还要修改控件里边的样式,具体实现如下:

先在控件设置好100%

<el-form-item label="报价日期" prop="quotationDate" >
  <div class="el-picker-width100pr" style="width: 100%;">
    <el-date-picker style="width: 100%;" v-model="ruleForm.quotationDate" type="date"
      placeholder="Pick a day" />
  </div>
</el-form-item>

修改控件里边的样式

// 修改日期选择控件el-date-picker宽度为100%自适应
:deep(.el-picker-width100pr .el-input__wrapper){
  width: 100% !important;
}

我的解决:

直接在组件里面设置style="width: 100%;"

            <el-form-item label="执法证有效期" prop="lecTimeRange">
              <el-date-picker
                style="width: 100%;"
                clearable
                v-model="form.lecTimeRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                @change="handleLecTimeRangeChange"
              />
            </el-form-item>