Ant Design Vue 表格日期时间样式优化 保留年月日、替换-为/

〇、需求描述

单元格内 yyyy-MM-dd hh:mm:ss → yyyy/MM/dd

一、正则匹配 yyyy-MM-dd hh:mm:ss 版

原生JS方法格式，注意使用时转换为 VUE Method 写法原生JS方法格式，注意使用时转换为 VUE Method 写法

//【方法】日期时间样式优化 保留年月日、替换-为/
function OptimizeStyleForTableTimeCols(count) {
    // 参数 count：按照查找到的日期时间列先后排序，要处理多少列，为空则全部处理
    var regForTime =
        /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
    //↑ 正则匹配 yyyy-MM-dd hh:mm:ss

    var tbody = document.getElementsByTagName('tbody')[0] // 首个表格数据区
    var tbodyRows = tbody.rows // 首个表格数据区的各行
    if (tbody.rows[0] != undefined) {
        var row1CellsArray = tbody.rows[0].cells // 数据区第一行各项
        var timeCellsNumArray = [] // 数据区日期时间列 序号组

        for (var i = 0; i < row1CellsArray.length; i++) {
            // 遍历数据区第一行各项
            if (row1CellsArray[i] != undefined) {
                if (regForTime.test(row1CellsArray[i].innerText)) {
                    // 找到待操作的日期时间列序号
                    timeCellsNumArray.push(i) //记录日期时间列序号
                }
            }
        }

        var str // 处理字符串的暂存

        if (count == null || count === '' || count > timeCellsNumArray.length) {
            //为空或超出可处理列数量则全部处理
            count = timeCellsNumArray.length
        }

        if (timeCellsNumArray.length != 0) {
            for (var i = 0; i < tbodyRows.length; i++) {
                for (var j = 0; j < count; j++) {
                    //按照查找到的日期时间列先后排序，要处理多少列，为空则全部处理
                    str = tbodyRows[i].cells[timeCellsNumArray[j]].innerText
                    //处理首个表格数据区的第 i 行中的 日期时间列 (第 j 列) 的文本
                    str = str.substring(0, 10) //只保留年月日
                    str = str.replace(/-/g, '/') //替换-为/
                    tbodyRows[i].cells[timeCellsNumArray[j]].innerText = str
                }
            }
        }
        console.log(timeCellsNumArray, i)
    }
}

二、表头项匹配文字 『日期』 版

        //【方法】日期时间样式优化 保留年月日、替换-为/
        OptimizeStyleForTableTimeCols(count) {
            // 参数 count：按照查找到的日期时间列先后排序，要处理多少列，为空则全部处理

            var thead = document.getElementsByTagName('thead')[0] // 首个表格类型区
            var tbody = document.getElementsByTagName('tbody')[0] // 首个表格数据区
            var tbodyRows = tbody.rows // 首个表格数据区的各行
            if (tbody.rows[0] != undefined) {
                var row1CellsArray = thead.rows[0].cells // 类型区各项
                var timeCellsNumArray = [] // 数据区日期时间列 序号组

                for (var i = 0; i < row1CellsArray.length; i++) {
                    // 遍历数据区第一行各项
                    if (row1CellsArray[i] != undefined) {
                        if (row1CellsArray[i].innerText.search('日期') >= 0) {
                            // 找到待操作的日期时间列序号
                            timeCellsNumArray.push(i) //记录日期时间列序号
                        }
                    }
                }

                var str // 处理字符串的暂存

                if (count == null || count === '' || count > timeCellsNumArray.length) {
                    //为空或超出可处理列数量则全部处理
                    count = timeCellsNumArray.length
                }

                if (timeCellsNumArray.length != 0) {
                    for (var i = 0; i < tbodyRows.length; i++) {
                        for (var j = 0; j < count; j++) {
                            //按照查找到的日期时间列先后排序，要处理多少列，为空则全部处理
                            str = tbodyRows[i].cells[timeCellsNumArray[j]].innerText
                            //处理首个表格数据区的第 i 行中的 日期时间列 (第 j 列) 的文本
                            str = str.substring(0, 10) //只保留年月日
                            str = str.replace(/-/g, '/') //替换-为/
                            tbodyRows[i].cells[timeCellsNumArray[j]].innerText = str
                        }
                    }
                }
            }
        },

三、附赠可选的定时自检方法，减少失效

mounted() {
        // 执行10次每隔 100ms 确保日期时间样式优化检查，确保其顺利生效
        var Countdown = 10
        var obj = this
        countdown()
        function countdown() {
            if (Countdown > 0) {
                obj.OptimizeStyleForTableTimeCols(1)
                //日期时间样式优化 保留年月日、替换-为/、处理符合的第 1 列
                //console.log(Countdown)
                Countdown--
                setTimeout(countdown, 100)
            }
        }
        console.log('MOUNTED')
    },
    updated() {
        this.OptimizeStyleForTableTimeCols(1) //日期时间样式优化 保留年月日、替换-为/、处理符合的第 1 列
        console.log('UPDATED')
    },