element时间插件，选择中文显示中文

页面效果：

html：

 <div class="block" :class="{ disableText: showShortcut }">
          <el-date-picker
            v-model="timests"
            ref="datepicker"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            clearable
            :default-time="['00:00:00', '23:59:59']"
            @change="queryFn"
          >
          </el-date-picker>
          <div class="show-shortcut-text" v-if="showShortcut">
            {{ pickUnit }}
          </div>
        </div>

css：

  .disableText {
    width: 200px !important;
    .el-date-editor {
      width: 200px !important;
    }
    .el-range-separator,
    .el-range-input {
      color: #fafafa;
    }
  }

js：

  pickerOptions() {
      let that = this;
      return {
        format: "HH:mm:ss.SSS",
        shortcuts: [
          {
            text: "最近15分钟",
            class: "active",
            onClick(picker) {
              that.pickUnit = "最近15分钟";
              that.shortClick = true;
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 60 * 1000 * 15);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "今天",
            onClick(picker) {
              that.pickUnit = "今天";
              that.shortClick = true;
              const start = new Date();
              const end = new Date();
              const startTime = moment(moment().startOf("day").valueOf());
              const endTime = moment(moment().endOf("day").valueOf());
              start.setTime(startTime);
              end.setTime(endTime);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "本周",
            onClick(picker) {
              that.pickUnit = "本周";
              that.shortClick = true;
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近30分钟",
            onClick(picker) {
              that.pickUnit = "最近30分钟";
              that.shortClick = true;
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 60 * 1000 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个小时",
            onClick(picker) {
              that.pickUnit = "最近一个小时";
              that.shortClick = true;
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 60 * 1000 * 60);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近24小时",
            onClick(picker) {
              that.pickUnit = "最近24小时";
              that.shortClick = true;
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },

          {
            text: "最近7天",
            onClick(picker) {
              that.pickUnit = "最近7天";
              that.shortClick = true;
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近30天",
            onClick(picker) {
              that.pickUnit = "最近30天";
              that.shortClick = true;
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近90天",
            onClick(picker) {
              that.pickUnit = "最近90天";
              that.shortClick = true;
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一年",
            onClick(picker) {
              that.pickUnit = "最近一年";
              that.shortClick = true;
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      };
    },

再加个监听事件：

 watch: {
    timests() {
      console.log("this.shortcuts", this.shortClick);
      let that = this;
      this.$nextTick(() => {
        let list = document.getElementsByClassName("el-picker-panel__shortcut");
        console.log("list", list);
        let index = -1;
        if (list) {
          for (let i = 0; i < list.length; i++) {
            list[i].className = "el-picker-panel__shortcut";
          }
          if (this.shortClick == true && that.pickUnit) {
            this.showShortcut = true;
            for (let i = 0; i < list.length; i++) {
              if (list[i].innerText === that.pickUnit) index = i;
              else {
                let text = list[i].innerText.replace(/[\r\n]/g, "");
                if (text == that.pickUnit) index = i;
              }
            }
            if (index > -1)
              list[index].className =
                "el-picker-panel__shortcut active_shortcut";
          } else {
            this.showShortcut = false;
          }
        }
        this.shortClick = false;
      });

      console.log("timests", this.timests, this.pickUnit);
    },
  },