如何在vue中使用element-ui时间控件

如图我们发现开始时间和结束时间是分开使用的，但是我们看到element-ui官网上的例子没有这种分开使用的，所以我们需要利用里面的特性自己去实现。

<label>开始时间：</label>
<el-date-picker
    style="width: 230px"
    type="date"
    placeholder="请选择"
    v-model="realTimeInfo.startTime"
    @change="startTimeChange"
    :format="'yyyy-MM-dd'"
    :picker-options="startTimeConfig">
</el-date-picker>
<label>结束时间：</label>
<el-date-picker
     style="width: 230px"
     type="date"
     placeholder="请选择"
     v-model="realTimeInfo.endTime"
     @change="endTimeChange"
     :format="'yyyy-MM-dd'"
     :picker-options="endTimeConfig">
</el-date-picker>
<script>
export default {
    data () {
         realTimeInfo: {
               startTime: '',
               endTime: ''
         },
         startTimeConfig: {},
         endTimeConfig: {}
    },
    mounted () {
         this.initTimeConfig()
    },
    metods: {
        initTimeConfig () {
            let self = this
            // 开始时间配置
            this.startTimeConfig = {
                disabledDate (time) {
                    if (self.realTimeInfo.endTime) {
                        return time.getTime() > new 
                       Date(self.realTimeInfo.endTime).getTime()
                    }
                }
            },
            // 结束时间配置
            this.endTimeConfig = {
                disabledDate (time) {
                    if (self.realTimeInfo.startTime) {
                        return time.getTime() < new 
                        Date(self.realTimeInfo.startTime).getTime()
                    }
                }
            }
        },
        startTimeChange (val) {
            this.realTimeInfo.startTime = val
        },
        endTimeChange (val) {
            this.realTimeInfo.endTime = val
        }
    }
}
</script>