element-ui 日期選擇器-自定義前綴文本信息

自定義less類名：

/* 日期選擇器-自定義前綴文本信息 */
.datepicker-custom(@content, @width: 280px, @padding-left: 50px, @range-separator: 10px) {
    width: @width;
    position: relative;
    padding-left: @padding-left;
    /deep/ .el-range-separator {
        margin-right: @range-separator;
    }
    .prefix-label(@content);
}

.prefix-label(@content) {
    &::before {
        content: @content;
        position: absolute;
        color: #C0C4CC;
        left: 5px;
        font-size: 13px;
    }
}

複製代碼

使用less類名：

<template>
  <div class="wrap">
    <div class="header">
      <el-date-picker
        class="datepicker datepicker-custom"
        clearable
        v-model="date"
        type="daterange"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        start-placeholder="開始日期"
        end-placeholder="結束日期">
      </el-date-picker>
      <el-button type="primary">搜索</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CallDetail',
  data() {
    return {
      date: ''
    }
  }
</script>

<style lang="less" scoped>
  .wrap {
    padding: 16px;
    background: #fff;
    height: 100%;
  }

  .header {
    display: flex;
    align-items: center;
    .datepicker {
      .datepicker-custom(@content: '前綴：');
      margin-right: 20px;
    }
  }
</style>
複製代碼

查看效果：