【数据处理】格式化数据

一、前言

  在日常开发过程中，我们会遇到这样的需求：后端返回的某些数据，是使用数字代码来区别不同的含义（比如1代表是，0代表否），但是前端将数据进行展示时，需要将这些数字代码转换成对应的含义。
  而当同类型数据有多个时，我们就可以运用formatter属性，编写对应的函数对数据进行批量格式化。

• 在数据列表增加formatter属性
• 给需要进行格式化的数据编写相应的函数

二、示例

<script>
export default {
    name: "QueryInterface", //DOM元素的id
    data() {
        return {
        	// 数据列表
            columns: [
                {
                    prop: "completeTime", 
                    label: "完成时间", 
                    width: "8%", 
                    align: "center", 
                    formatter: this.formatDate, 
                },
                {
                    prop: "status", //数据名称
                    label: "状态", //0:未处理,1:已处理
                    width: "8%", //数据所在列表宽度
                    align: "center", //数据对齐方式
                    formatter: this.formatStatus, //对该数据进行格式化——formatDate（名字自己取）
                },
                {
                    prop: "ifLock",
                    label: "是否锁定", //1:锁定；0:正常
                    width: "8%",
                    align: "center",
                    formatter: this.formatLock,
                },
            ],
            // 数据
            data: [
                {
                    status: "1",
                    ifLock: "0",
                    completeTime: 1611471459893,
                },
            ],
        };
    },
    methods: {
        // 状态;0:未处理,1:已处理
        formatStatus(row, column) {
            let status = row.status;
            let constant = {
                0: "未处理",
                1: "已处理",
            };
            return constant[status];
        },
        // 是否锁定，1：锁定；0：正常
        formatLock(row, column) {
            let lock = row.ifLock;
            let constant = {
                0: "正常",
                1: "锁定",
            };
            return constant[lock];
        },
    }
};
</script>

三、效果图

四、拓展——时间戳格式化

方法	描述
getFullYear()	从 Date 对象以四位数字返回年份
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)
getMonth()	从 Date 对象返回月份 (0 ~ 11)
getHours()	返回 Date 对象的小时(0 ~ 23)
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)
getSeconds()	返回 Date 对象的秒数(0 ~ 59)

<script>
    function changeTimeFormat(time) {
        let date = new Date(time); //将时间戳转换为标准日期格式
        console.log(date); //Wed Aug 17 2022 16:56:15 GMT+0800 (中国标准时间)
        
        // 因为月份是从0开始的，所以实际月份要加1
        let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; 
        let currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        let hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        let mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        let ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        
        //返回格式：yyyy-MM-dd hh:mm:ss
        return date.getFullYear() + "-" + month + "-" + currentDate + " " + hh + ":" + mm + ":" + ss;
    }
    let now = (new Date()).valueOf(); //当前时间戳（1660726575833）
    console.log(changeTimeFormat(now)); //2022-08-17 16:56:15
</script>