前言

在上一篇文章中有介绍到如何生成以时间日期为表头的动态表格，附上链接
vue+element ui生成以当月日期时间为表头的table表格

那么在这里就将介绍在这张表格中进行的一些操作，从而实现想要实现的功能

实现步骤

  • 通过点击事件，得到当前点击的日期时间，在这里我运用到的是el-table中的@cell-click事件，得到当前点击的row和column，然后获取到点击的日期时间，在与前面得到的日期时间数组进行对比，得到确切的时间
//在这里我主要是利用得到的column当前列的数据
        cellClick(row, column, event, cell) {
            let columnDate = column.label
            // 得到当前列的数据与返回的日期数据做对比
            let nowColumnDate = '' //这个就是想要得到的当前点击列的具体时间
            this.visibleCalendar.forEach(item => {
                let itemLabel = item.day + '日' + '，' + item.week
                if (columnDate === itemLabel) {
                    nowColumnDate = item.keyDate
                }
            })
        }
  • 接下来就要看你具体想要实现的功能是什么，我这里的功能主要是判断它是在当日还是当日之前或者当日之后，然后显示不同的弹窗内容，在当日和当日之前的日期呢，就显示休假的详细信息就可以，在当日之后的日期是可以添加休假信息的，所以在这个地方我用到的是将得到的时间转换成时间戳的格式，通过时间戳去判断是否出现弹窗
cellClick(row, column, event, cell) {
            ......
            let newColumnDate = ''
            newColumnDate = new Date(nowColumnDate) * 1
            
            // 获取今天的年月日与当前行的数据做对比来判断标记信息的显示
            let todayTime = ''
            const today = this.getToday(new Date())
            todayTime = new Date(today) * 1
            let rowDayData = row.dayData
            let nowRowData = {}
            for (let k in rowDayData) {
                if (k === nowColumnDate && Object.keys(rowDayData[k]).length !== 0) {
                    nowRowData = rowDayData[k]
                }
            }
            // 判断在今日之后添加与查看标记信息
            //Object.keys(nowRowData).length 这个是我用来判断当前日期有没有数据，也是一个判断条件之一
            if (newColumnDate > todayTime && Object.keys(nowRowData).length !== 0 && nowRowData.dutyUserVacationSerialNo === null) {
                console.log('在今日之后');
                this.$refs.markInfoAfter.markInfoAfterDialog = true //想要显示的弹窗，以实际的为准
            } else if (newColumnDate > todayTime && Object.keys(nowRowData).length !== 0 && nowRowData.dutyUserVacationSerialNo !== null) {
                this.$refs.markInfoAfter.markInfoAfterDialog = true //想要显示的弹窗，以实际的为准
            }
            // 判断在今日之前查看标记信息
            if (newColumnDate < todayTime && Object.keys(nowRowData).length !== 0 && nowRowData.dutyUserVacationSerialNo === null) {
                console.log('在今日之前，但是没有休假标记信息');
                this.$refs.markInfoAfter.markInfoAfterDialog = false //关闭弹窗，以实际的为准
                this.$refs.markInfo.markInfoBeforeDialog = false //关闭弹窗，以实际的为准
            } else if (newColumnDate < todayTime && Object.keys(nowRowData).length !== 0 && nowRowData.dutyUserVacationSerialNo !== null) {
                console.log('在今日之前');
                this.$refs.markInfo.markInfoBeforeDialog = true //想要显示的弹窗，以实际的为准
                this.$refs.markInfo.getBaseData(nowRowData.dutyUserVacationSerialNo)
            }
            // 判断在今天查看标记信息
            if (newColumnDate === todayTime && Object.keys(nowRowData).length !== 0 && nowRowData.dutyUserVacationSerialNo === null) {
                console.log('在今天，安排了值班，没有值班标记信息');
            } else if (newColumnDate === todayTime && Object.keys(nowRowData).length !== 0 && nowRowData.dutyUserVacationSerialNo !== null) {
                console.log('在今天');
                this.$refs.markInfo.markInfoBeforeDialog = true //想要显示的弹窗，以实际的为准
            }
            // 没有值班安排，不能添加以及查看休假标记信息
            if (Object.keys(nowRowData).length === 0) {
                console.log('没有值班安排，不能添加休假信息');
                this.$refs.markInfoAfter.markInfoAfterDialog = false //关闭弹窗，以实际的为准
                this.$refs.markInfo.markInfoBeforeDialog = false //关闭弹窗，以实际的为准
            }
        },
  • 如果可以添加休假的标记信息，添加完成之后就会显示下面的效果
  • 在这里呢还有一个地方就是当日期为当天的日期的时候，表格需要加深一下背景颜色，在这里呢，我也主要是用的el-table中的cell-style，通过表头的是时间与当前的日期时间做对比，写上判断条件，渲染样式
cellStyle({row,column}) {
            let columnDate = column.label
            // 得到当前列的数据与返回的日期数据做对比
            let nowColumnDate = ''
            let newColumnDate = ''
            this.visibleCalendar.forEach(item => {
                let itemLabel = item.day + '日' + '，' + item.week
                if (columnDate === itemLabel) {
                    nowColumnDate = item.keyDate
                }
            })

            newColumnDate = new Date(nowColumnDate) * 1
            // 得到点击的当前行的日期的时间戳，方便为了选择休假日期的禁止时间做对比
            this.dutyTime = Number(newColumnDate)

            // 获取今天的年月日与当前行的数据做对比来判断标记信息的显示
            let todayTime = ''
            const today = this.getToday(new Date())
            todayTime = new Date(today) * 1
            if(newColumnDate === todayTime){
                return 'cursor: pointer;backgroundColor:#f2f8fe'
            }else{
                return 'cursor: pointer;'
            }
        }
  • 这样就可以很好的查看当天的日期了

总结

可能我的实现方式有些复杂，但是也确实实现了我想要实现的功能，如果有更好的方法，欢迎交流~~