在 el-time-picker 上禁用自动完成并显示值格式 Element-UI答案

【问题标题】：Disable autocomple on el-time-picker and display value format Element-UI在 el-time-picker 上禁用自动完成并显示值格式 Element-UI
【发布时间】：2018-07-13 01:11:59
【问题描述】：

任何使用过 Vuejs 的 ElementUI 库的人。

我正在使用el-time-picker 组件，现在当我关注它时，它会自动将输入设置为当前小时，但我希望它保持空白，我曾尝试将其默认值设置为null 但它没有没用。

还以为我有这个：

:picker-options="{ format: 'HH:mm', }"

选择器下拉菜单只显示小时和分钟，但一旦选择，输入显示小时：分钟：秒，这也会产生如果我输入小时，我必须输入秒才能让它工作，我不'不想要这种行为，只是为了显示 hh:mm 并能够输入它。

任何建议：？我试图将代码理解为尝试覆盖组件的权利。

编辑 1

时间选择器代码很简单，我只有几个选项的组件：

<el-time-picker
    v-model="row.from"
    value-format="HH:mm"
    :picker-options="{
      format: 'HH:mm',
      selectableRange: '00:00:00 - 23:59:00',
    }"
    placeholder="Desde">
</el-time-picker>

【问题讨论】：

您可以在此处包含您的el-time-picker 代码吗？
好的，已经完成了

标签： javascript vue.js element-ui

【解决方案1】：

row.from 的初始（默认）值必须是空字符串，而不是 null。 format 选项仅适用于弹出选择器，不适用于编辑框。要实现您想要的，您必须指定 step 选项，如 JSfiddle

更新

JSfiddle 已更新。

【讨论】：

首先，step 选项仅适用于time-select 组件，不适用于time-picker，其次无论row.from 的值如何，它都会设置当前时间。
更新了 JSfiddle

【解决方案2】：

使用@focus事件改变默认值：

https://jsfiddle.net/2q8ovLah/3/

 <el-time-picker placeholder = "HH:mm:ss"
                 value-format = "HH:mm:ss"
                 v-model = "time"
                 :editable = "false"
                 :picker-options = "{selectableRange: '00:00:01 - 23:59:59'}"
                 clearable
                 @focus = "focused">
  </el-time-picker>

data() {
  return {
    time: ''
  };
},
methods: {
  focused(){
    if(this.time === '') {
        this.time = '00:01:00'
    }
  }
}

【讨论】：