实现表格内每行两个日期选择器且互相限制

最新推荐文章于 2023-05-05 11:15:18 发布

拒绝敲代码的程序猿

最新推荐文章于 2023-05-05 11:15:18 发布

阅读量336

点赞数 1

分类专栏： el组件的扩充使用文章标签： javascript html 前端 elementui 组件化

本文链接：https://blog.csdn.net/greencaiji/article/details/119934289

版权

el组件的扩充使用专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述
期待效果：表格内的每行的入场时间与离场时间互相限制但不影响其它行的这两项选择器的选择。
做限制element官网给的方法为：

首先表格内数据是这样写的：

<el-table-column prop="planArriveDate" label="计划入场时间" align="center" min-width="150">
            <template slot-scope="scope">
                <el-date-picker
                        v-model="scope.row.planArriveDate"
                        type="date"
                        style="width: 100%"
                        value-format="yyyy-MM-dd"
                        :picker-options="newStartOptions"
                        @change="timeStatus(scope.row)"
                        @focus="focusTime(scope.row)"
                        clearable
                        placeholder="计划入场时间">
                </el-date-picker>
            </template>
            </el-table-column>
            <el-table-column prop="planExitDate" label="计划离场时间" align="center" min-width="150">
                <template slot-scope="scope">
                    <el-date-picker
                            v-model="scope.row.planExitDate"
                            type="date"
                            style="width: 100%"
                            value-format="yyyy-MM-dd"
                            :picker-options="newExitOptions"
                            @change="timeStatus(scope.row)"
                            @focus="focusTime(scope.row)"
                            clearable
                            placeholder="计划离场时间">
                    </el-date-picker>
                </template>
            </el-table-column>

然后是change方法和focus方法：

// 时间开始选择器
        timeStatus(row) {
            this.overDate = row.planExitDate
            this.startDate = row.planArriveDate
        },
        // 获取焦点后，开始/完成时间为当前行的开始/完成时间
        focusTime(row) {
            this.overDate = row.planExitDate
            this.startDate = row.planArriveDate
        },

最后在computed内做限制：

computed: {
        newStartOptions() {
            const timeEnd = this.overDate
            return {
                disabledDate(time) {
                    if (!timeEnd) {
                        return time.getTime() < Date.now()
                    } else {
                        return time.getTime() > (new Date(timeEnd.substring(0, 11))).getTime() || time.getTime() < Date.now()
                    }
                }
            }
        },
        newExitOptions() {
            const timeStart = this.startDate
            return {
                disabledDate(time) {
                    if (!timeStart) {
                        return time.getTime() < Date.now()
                    } else {
                        return time.getTime() < (new Date(timeStart.substring(0, 11))).getTime()
                    }
                }
            }
        }
    },