element ui中如何自定义一个el-date-picker的尺寸

Question

<el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>

渲染出来的input通过父级元素+input标签设置样式无效

element中普通的一个输入框，大部分都是默认的尺寸，现在想对其中某几个做样式调整，改变宽高和颜色，怎么处理？直接在父级元素加class后设置样式，因为dom没有，所以webpack打包后样式不见了。该怎么处理呢？

Answer 1

谢邀~

<el-input
  class="input-class"
  placeholder="请输入内容"
  v-model="input1"
  :disabled="true">
</el-input>

.input-class{
    width: 500px;
    height: 40px;
}

这样即可。
// 关于date-picker 可以根据渲染处理的样式名追加样式呀

<div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker class="input-class" v-model="value1" type="date" placeholder="选择日期">
    </el-date-picker>
</div>

.input-class{
  .el-input__inner{
    width: 50px; 
  }  
}

webpack打包后scoped的样式丢失，有两种方案。1、单独样式不用scoped，2、使用/deep/。

// 单独给这个input写个style
<style lang="less">
 .input-class{
  .el-input__inner{
    width: 50px; 
  }  
}
</style>
<style lang="less" scoped>
.other{}
</style>

或者用深度选择器/deep/。具体查看官方文档

Answer 2

谢邀。element-ui 也是可以设置 class 去关联 css 的
这是一个项目中的 el-input

Answer 3

在标签中添加 style="width:217px"

Answer 4

请问最后你是怎么解决的？