效果图：

 

先上代码，再简单介绍：

DOM部分：

 

<el-form-item label="创建时间：" class="date_box">

     <el-date-picker

        v-model="roleSeach.time"

        type="datetimerange"

        :clearable="true"

        range-separator="--"

        align="right"

        start-placeholder="开始时间"

        end-placeholder="结束时间"

        value-format="yyyy-MM-dd HH:mm:ss"

        :default-time="['00:00:00', '23:59:59']"

        @mouseover.native="setDateIcon"

        @mouseleave.native="dateVisableIcon='false'">

     </el-date-picker>

     <i 
       :class="[
        'el-icon-date',
        dateVisableIcon=='false'?'data_icon':'data_display'
       ]">
    </i>
</el-form-item>

data部分：

dateVisableIcon:'false',

roleSeach:{

        time:'',

},

style部分：

::v-deep .el-range__icon {

    display: none;

}

.date_box {

    position: relative;

    width: fit-content;

    .data_icon {

      display: block;

      position: absolute;

      top: 50%;

      right: 8px;

      z-index: 9;

      color: #c0c4cc;

      font-size: 14px;

      transform: translateY(-50%);

    }

    .data_display{

      display: none;

    }

    ::v-deep .el-range__close-icon {

      position: absolute;

      right: 34px;

      top: 54%;

      transform: translateY(-50%);

    }

    ::v-deep .el-range__close-icon{

      right: 15px;

      top: 55%;

    }
}

methods部分：

setDateIcon(){

      if (this.roleSeach.time == '' || this.roleSeach.time == null) {

        return false;

      }

      this.dateVisableIcon='true';

},

OK，这里就好了。这里给节点添加了一个划入和划出的事件，会去判断这个时间日期选择是否存在值，来返回一个布尔值，改变display样式来显示和隐藏（右侧的icon、清除选择icon）来达到想要的效果。

至于el-date-picker用到的一些属性，官档上是很详细的，这里简单概括一下：
:clearable="true"-----是否显示清除按钮
value-format----------绑定值的格式
type---------------------显示类型 year/month/date/week/ datetime/datetimerange/daterange
range-separator-----选择范围时的分隔符，可以为汉字、标点符号等
start-placeholder----范围选择时开始日期的占位内容
end-placeholder-----范围选择时结束日期的占位内容
:default-time----------选中日期后的默认具体时刻