elementui时间组件问题

elementui 时间组件怎么让他只显示左右切换 不显示时间选择面板。变成这样

帮帮忙

看这里---------

<template>
  <el-time-picker
    v-model="time"
    :picker-options="pickerOptions"
    :placeholder="placeholder"
  ></el-time-picker>
</template>

<script>
export default {
  data() {
    return {
      time: '', // 绑定的时间值
      pickerOptions: {
        format: 'HH:mm', // 时间格式
        type: 'time' // 只显示时间选择
      },
      placeholder: '请选择时间' // 输入框的提示文字
    };
  }
};
</script>

使用 picker-options 属性进行配置。设置 picker-options 的 format 为 'HH:mm'，并将 type 设置为 'time'。这样可以只显示时间选择的小时和分钟部分，隐藏日期选择和秒部分。

你直接看他源码是怎么写的就行，他有这个功能

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7397971
• 这篇博客你也可以参考下：使用elementui遇到字体图标显示不正常的问题
• 除此之外, 这篇博客: ElementUI：ElementUI脚手架介绍与配置，elementUI执行流程分析，开发后台活动管理中的 活动修改 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 活动修改分为回显和修改
  一、活动修改api

  //根据id查询活动
      findById:function(id){
          return request({
              url: `/gathering/gathering/${id}`,
              method: 'get'
          })
      },
      //根据id修改
      update:function(id,pojo){
          return request({
              url: `/gathering/gathering/${id}`,
              method: 'put',
              data:pojo
          })
      },
      saveOrUpdate:function(id,pojo){
          if(id == undefined || id == null || id == ''){
              return this.save(pojo)
          }else{
              return this.update(id,pojo)
          }
      }
  

  二、js
  注意：保存和修改使用同一个对话框，通过是否存在id来区分两个方法

  //新增/编辑活动
        save:function(){
          gatheringApi.saveOrUpdate(this.id,this.pojo).then(response =>{
            //美化提示框
            this.$message({
              showClose: true,
              message: response.message,
              type: response.flag?'success':'error'
            });
            //新增成功后，关闭弹出层，刷新列表数据，清空pojo数据
            if(response.flag){
              this.dialogFormVisible=false;
              this.searchPage();
              this.pojo={};
              this.id=null;
            }
          })
        },
        //编辑活动之回显
        findById:function(id){
          gatheringApi.findById(id).then(response =>{
            //绑定数据到pojo
            this.pojo = response.data;
            //显示对话框
            this.dialogFormVisible=true;
            //给id属性赋值
            this.id = id;
          })
        }
  

• 您还可以看一下 徐杨老师的ElementUI入门到实战教程课程中的 前篇ElementUI框架介绍小节, 巩固相关知识点