vue中日期组件，date-picker宽度异常

vue中date-picker的宽度异常，我给的100% 但是宽度还得不够，直接上图

看一下el-from-item的宽度是多少

可能被某些样式覆写了，你自己设置得没有生效，可以定义class 然后自己腹泻el-input__inner样式，设置宽度

首先 先看一下控制台 这100%的样式设置上了没有
其次 如果是设置上了 那你换个具体的值 试试看看宽度是否会变化
你这个里的100%应该不是 form的百分百 他应该是el-form-item__content 子元素

• 文章：Vue 日期控件(el-date-picker)回显异常及其原理分析 中也许有你想要的答案，请看下吧
• 除此之外, 这篇博客: vue中el-date-picker不回显问题中的 解决方案： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 查看官方文档后，就改用了另一种事件blur：（当 input 失去焦点时触发）

  // 直接把上面的change换成blur
  @blur="getpickerdata"
  

  改过之后又测试发现这个是可以更新数据重新赋值了，但是el-date-picker组件中的清空事件又失效了。。。。。。
  

  这很让人头大。。。。
  
  但是但是不要慌，经过我多事件的测试 最终、最终选择了input事件

  // 再把上面的blur换成input就完事了
  @input="getpickerdata"
  

  就是这简单的一行代码耗费了小半天的时间。。。。不过最终也是解决了修改数据不更新不重新赋值的情况，也修改了el-date-picker不清空的bug。

• 以下回答由chatgpt基于相关博客总结生成:

  针对宽度异常的问题，针对参考资料中给出的代码可以调整宽度。另外，还可以尝试给el-date-picker组件的根元素添加样式来调整宽度。具体来说，可以在style中增加类似于下面的代码：

  .el-date-picker__editor-wrap{
    width: 200px;
  }
  

  其中，200px可以替换成需要的宽度值。
  如果以上调整无效，则可以尝试通过CSS中的!important语法使样式强制生效，例如：

  .el-date-picker__editor-wrap{
    width: 200px !important;
  }