vue element ui 时间选择器设置

时间选择器设置"/>

vue element ui 时间选择器设置

需求：设置时间选择器,只能选择2018-01-01之后切小于当前时间的数据

<el-date-picker
v-model="rqq"
type="date"
placeholder="选择开始日期"
value-format="yyyy-MM-dd"
style="width:160px;font-size:16px"
:picker-options="pickerOptions0">
</el-date-picker><el-date-picker
v-model="rqz"
type="date"
placeholder="选择结束日期"
value-format="yyyy-MM-dd"
@change="getList()"
style="width:160px;font-size:16px"
:picker-options="pickerOptions1">
</el-date-picker>
data() {return {pickerOptions0: {disabledDate: time => {// 使用2018年的毫秒时间戳判断return time.getTime() < parseInt('1514736000000') || time.getTime() > Date.now();}},pickerOptions1: {disabledDate: time => {// 使用2018年的毫秒时间戳判断return  time.getTime() < parseInt('1514736000000') ||time.getTime() > Date.now();}}
} }

在发送请求之前进行日期的判断，首先确定默认日期是否设置，然后进行判断日期，如果结束时间大于起始时间则进行发送请求，如果结束时间小于起始时间则进行弹框提示，并且不发送请求

getList() {if (this.rqq > this.rqz) {this.$message({dangerouslyUseHTMLString: true,message: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>请选择正确的日期范围</strong>',type:'error'});}else{//.......发送请求}
}

设置ElementUI 表格无数据时的显示样式：

在标签里面天剑下面这些内容自定义控制样式<el-table></el-table><template slot="empty"><div class="table_empty"><div class="empty_tips">暂无未推修任务，<el-button @click="newFixTask" type="text" size="small" style="font-size:14px;">新建推修任务</el-button></div></div>
</template>