Vue+element ui 表格中时间选择器范围控制(两种方式)
1.页面<el-table v-loading="loading" :data="tableList" border><!-- 方法1 --><el-table-column label="上午时间" align="center" prop="timeRange"><template slot-scope="scope"><el-time-pi
·
1.页面
<el-table v-loading="loading" :data="tableList" border>
<!-- 方法1 -->
<el-table-column label="上午时间" align="center" prop="timeRange">
<template slot-scope="scope">
<el-time-picker
is-range
:clearable="false"
v-model="scope.row.timeRange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
value-format="HH:mm"
format="HH:mm"
style="width: 90%"
:picker-options="timeRangeOptions"
@input="timeRangeChange(scope.row)"
></el-time-picker>
</template>
</el-table-column>
<!-- 方法2 -->
<el-table-column label="下午时间" align="center" prop="timeRange1">
<template slot-scope="scope">
<el-time-picker
is-range
:clearable="false"
v-model="scope.row.timeRange1"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
value-format="HH:mm"
format="HH:mm"
style="width: 90%"
:picker-options="{selectableRange: `${scope.row.timeRange[1]?scope.row.timeRange[1]+':00':'00:00:00'}-23:59:00`,}"
></el-time-picker>
</template>
</el-table-column>
</el-table>
2.js
export default {
data() {
return {
timeRangeOptions: {
selectableRange: ""
}
}
},
methods:{
timeRangeChange(row) {
let value = row.timeRange[1];
let start = row.timeRange1[0];
this.timeRangeOptions.selectableRange =value <= start?value+"-"+start:["00:00:00" + "-" + start, value + "-" + "23:59:59"];
}
}
}
更多推荐
已为社区贡献6条内容
所有评论(0)