el-table内嵌套table的时间管理器限制

最新推荐文章于 2025-03-20 15:33:52 发布

夕雾不闻钟

最新推荐文章于 2025-03-20 15:33:52 发布

阅读量1k

点赞数

分类专栏：趟过的坑文章标签： elementui

本文链接：https://blog.youkuaiyun.com/qq_36712606/article/details/125805267

版权

趟过的坑专栏收录该内容

11 篇文章

订阅专栏

如下图,子表格中的节点类型若为前置节点,则预计完成时间必须在父表格的预计完成时间之前,否则相反

方法一:

使用focus方法获取到父表格的数据,再放进时间选择器内禁用

//html
<el-table-column prop="ReportPredictEndDate" label="预计完成时间" align="center" width="200">
  <template slot-scope="scope">
    <el-form-item style="margin-bottom: 0px" :prop="'MonthProgressDetails['+scopeInner.$index+'].Children['+scope.$index+'].ReportPredictEndDate'"                                                       :rules="projectRules.ReportPredictEndDate">
       <el-date-picker v-model="scope.row.ReportPredictEndDate" type="date" style="width:180px"  :picker-options="pickerOptions" @focus="focusDateOption(scopeInner.row)" placeholder="选择日期">
       </el-date-picker>
      </el-form-item>
    </template>
</el-table-column>




//data里面的代码

predictEndDate:'',
pickerOptions: {
  disabledDate(time) {
     const date = new Date(vm.predictEndDate);
     const endTime= date.getTime();
     return time.getTime() > endTime; //只能选择今天及今天之前的日期
     }
  },


//method里面的代码
methods: {
   focusDateOption(row){
     this.predictEndDate=row.ReportPredictEndDate;
   },
}

方法二:把pickerOptions放到计算函数里面,拿到父表格的row进行判断

<el-table-column prop="ReportPredictEndDate" label="预计完成时间" align="center" width="200">
  <template slot-scope="scope">
    <el-form-item style="margin-bottom: 0px" :prop="'MonthProgressDetails['+scopeInner.$index+'].Children['+scope.$index+'].ReportPredictEndDate'"  :rules="projectRules.ReportPredictEndDate">
     <el-date-picker v-model="scope.row.ReportPredictEndDate" type="date" style="width:180px"  @focus="setPreIndex(scope.$index)"
:picker-options="pickerOptions(scopeInner.row)" placeholder="选择日期">
     </el-date-picker>
   </el-form-item>
 </template>
</el-table-column>




computed: {
    pickerOptions(){
        return function(row={}){
                let _this = this
            return{
                disabledDate(time) {
                    debugger;
                    if(row.Children[_this.planPreIndex].PlanType=="1"){
                        return time.getTime() > new Date(row.ReportPredictEndDate).getTime()
                    }
                    else if(row.Children[_this.planPreIndex].PlanType=="2"){
                        return time.getTime() < new Date(row.ReportPredictEndDate).getTime()
                    }else{
                        return false;
                    }
                }
            }
        }
    }
},