实现两个日期组件相互制约

逻辑实现了,目前存在问题。在保存刷新后,功能失效。目前解决办法使用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>
欢迎阅读!
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇