逻辑实现了,目前存在问题。在保存刷新后,功能失效。目前解决办法使用v-if拆卸组件再重新渲染。
通过disabled-date属性实现。
<template lang="">
<el-table-column prop="planStartTime" label="计划开始时间" min-width="140">
<template #default="scope">
<el-date-picker
v-if="!tableData.loading" // 临时解决
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="width: 100%"
type="date"
v-model="scope.row.planStartTime"
placeholder="请输入开始时间"
clearable
:disabled-date="(e) => disabledDateStart(e, scope.row)"
>
</el-date-picker>
</template>
</el-table-column>
<el-table-column prop="planEndTime" label="计划结束时间 " min-width="140">
<template #default="scope">
<el-date-picker
v-if="!tableData.loading"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="width: 100%"
type="date"
v-model="scope.row.planEndTime"
placeholder="请输入结束时间"
clearable
:disabled-date="(e) => disabledDateEnd(e, scope.row)"
>
</el-date-picker>
</template>
</el-table-column>
</template>
<script>
const disabledDateEnd = (date, row) => {
if (row.planStartTime) {
return date.getTime() < new Date(row.planStartTime).getTime();
}
};
const disabledDateStart = (date, row) => {
if (row.planEndTime) {
return date.getTime() > new Date(row.planEndTime).getTime();
}
};
</script>