【vue】el-time-pick is-range用法时绑定数组问题

news/2024/7/10 0:26:06 标签: vue

1.问题

1.el-time-pick控件is-range用法,当v-model用的是数组时,选择时间会有问题,如图:
在这里插入图片描述
2.代码如下

<template>
  <el-time-picker
    v-model="time"       
    format="HH:mm:ss"
    value-format="HH:mm:ss"
    style="width: 380px"
    is-range
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围"
  ></el-time-picker>
</template>
<script>
  export default {
    data() {
      return {
        time: []
      }
    },
    methods:{
    }
  }
</script>

3.改成空字符串

<template>
  <el-time-picker
    v-model="time"       
    format="HH:mm:ss"
    value-format="HH:mm:ss"
    style="width: 380px"
    is-range
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围"
  ></el-time-picker>
</template>
<script>
  export default {
    data() {
      return {
        time: '' //如果实在要用数组的话,可以加一个默认值time:['00:00:00','23:59:59'],或者都为空的默认值['','']
      }
    },
    methods:{
    }
  }
</script>

4.如图
在这里插入图片描述
5.听说是官网的bug


http://www.niftyadmin.cn/n/903270.html

相关文章

【vue】el-input文本框v-model数据改变时不刷新的问题

1.问题说明 1.在数组循环页面中&#xff0c;改变数组中某个底层的属性&#xff0c;对应的el-input所绑定的v-model的值改变后&#xff0c;el-input内容不更新 2.问题解决 1.可以在赋值的结尾加上this.$forceUpdate()强制更新 3.绑定的是对象的属性时&#xff0c;该属性一开始并…

【vue】avue-crud配置大全-持续更新

1.表格属性 width: 100%,//表格宽度 calcHeight: auto,//表格高度差&#xff08;主要用于减去其他部分让表格高度自适应&#xff09; height: auto,//表格高度 maxHeight: auto,//表格最大高度 border: true,//是否显示表格边框 expand: false,//是否展开折叠行 index: false,…

【js】数组join用法

var array [1,2,3] var str array.join(",") console.log(str)

【vue】vue-clipboard2剪贴板示例

1.效果示例 2.依赖包下载 //这里用的是"vue-clipboard2": "^0.3.1" npm install vue-clipboard2 //或者 yarn add vue-clipboard23.使用依赖 import VueClipboard from vue-clipboard2 Vue.use(VueClipboard);4.页面示例 <template><div style…

【vue】异步请求同步的方法

handleClick() {return new Promise((resolve,reject) > {getRequest().then(res > {//操作1resolve();}).catch(error >{console.log(error)reject()})}) }, test(){Promise.all([this.handleClick()]).then(res>{//操作2}) }

【docker】linux干掉docker进程

1.说明 对于linux内存满了情况&#xff0c;sudo systemctl start docker,sudo systemctl restart docker,sudo systemctl stop docker等等重启 启动docker,均无反应&#xff0c;查询docker状态docker挂起了。直接干掉进程 sudo kill -9 15569

【docker】docker操作network

1、创建网络 test-network docker network create -d bridge --subnet 172.25.0.0/16 test-network docker network create test-network 2、将php容器或其他容器加入到test-network网络 docker network connect test-network php 3、 查看网络 docker network ls 4、 断开和移…

【vue】el-popover遍历渲染

1.示例图 2.示例代码 <template><div><el-popover placement"bottom" v-for"(item,index) in list" :key"index" width"250" trigger"manual" :ref"popover-${item.id}"><div class"t…