关于elementui的TimePicker、DatePicker、DateTimePicker再开发使用中遇到的问题

关于elementui的TimePicker、DatePicker、DateTimePicker再开发使用中遇到的问题

最近在vue项目中使用elementui 的TimePicker、DatePicker、DateTimePicker这三个组件的时候，我发现使用范围选择的时候选择器中间的那个字有一少半显示不出来，为此在这记录下这个问题

官网例子

<template>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="value1"
      type="monthrange"
      range-separator="至"
      start-placeholder="开始月份"
      end-placeholder="结束月份">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">带快捷选项</span>
    <el-date-picker
      v-model="value2"
      type="monthrange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始月份"
      end-placeholder="结束月份"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()]);
            }
          }, {
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: ''
      };
    }
  };
</script>

显示结果：

在vue项目中使用的时候就出现了这种情况如图：

在控制台检查元素后发现是这块出现了问题如图：

在vue中使用的时候需要在vue样式这加上这个：

这时就解决了字显示不全的问题了如图：

欢迎大家评论自己在使用element ui的时候都遇到什么困惑，我们一起聊聊。