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-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"];
    }
  }
}