针对“VUE-ElementUI 时间区间选择器的使用”的完整攻略，我可以提供以下内容：

VUE-ElementUI 时间区间选择器的使用

介绍

VUE-ElementUI是基于Vue.js 2.0的桌面端组件库，它提供了丰富的页面组件和交互，其中包括时间区间选择器。

安装

在使用时间区间选择器之前，我们首先需要在项目中引入ElementUI组件库。可以使用npm或者yarn进行安装:

npm install element-ui --save

或

yarn add element-ui

然后在项目的 main.js 中引入ElementUI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

使用

在 Vue 组件中使用时间区间选择器，我们需要在模板中引入el-date-picker组件，并设置 type 属性为 "datetimerange"：

<template>
    <div>
        <el-date-picker
            v-model="daterange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="onDateChange">
        </el-date-picker>
    </div>
</template>

其中，v-model 绑定的是选择器的值， range-separator 是分隔符， start-placeholder 和 end-placeholder 是输入框的占位符。

在上述代码中，我们监听了 @change 事件，可以在时间区间选择器的值改变时触发相应的处理函数：

<script>
export default {
    data() {
        return {
            daterange: [] // 时间区间选择器的值
        }
    },
    methods: {
        onDateChange(value) {
            console.log(value)
        }
    }
}
</script>

示例

下面，我将提供两个示例，分别演示时间区间选择器的常见用法。

示例1：选择时间段并绑定查询

这个示例演示了如何使用时间区间选择器来绑定查询数据。首先，我们在模板中添加一个按钮，并绑定 click 事件：

<template>
    <div>
        <el-date-picker v-model="daterange" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        <el-button type="primary" @click="queryData">查询</el-button>
    </div>
</template>

然后在事件处理函数中，可以获取时间区间选择器的值，并使用它来查询数据：

<script>
export default {
    data() {
        return {
            daterange: [] // 时间区间选择器的值
        }
    },
    methods: {
        queryData() {
            console.log('查询数据', this.daterange[0], this.daterange[1])
            // TODO: 查询数据
        }
    }
}
</script>

示例2：限制选择时间的范围

这个示例演示了如何使用 range-caseade 属性来限制选择时间的范围。和示例1一样，我们在模板中添加一个时间选择器，只不过这次加上了 range-caseade 属性：

<template>
    <div>
        <el-date-picker v-model="daterange" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
    </div>
</template>

然后在 data() 函数中，设置 pickerOptions 对象，以限制日期的范围：

<script>
export default {
    data() {
        return {
            daterange: [], // 时间区间选择器的值
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7
                }
            }
        }
    }
}
</script>

在这个例子中，我们设置了 disabledDate 属性，使用该函数可以限制选择器中日期的范围；在示例中，我们通过计算当前时间戳减去一天来得到时间区间选择器应该允许的时间范围，也就是从昨天的0点开始，到当前时间的凌晨。