The element table processes the time format returned by the backend, and the Table table uses the formatter attribute

Project scenario:

Sometimes the time data format ( 2021-08-04T14:39:47.939 ) returned to us by the backend in the project is not what we want to display in the end, and the display effect is not good. At this time, we need to initialize the returned time data to achieve the final display effect ( 2021-08-04 14:39:47 ) .

The display effect of the time data returned by the backend:

---

 solution:

At the beginning of the period, I wanted to introduce the moment.js plug-in, bind the method of processing the time format, and specifically convert the timestamp. Although the final effect can be achieved, considering the need to download and install the plug-in...

By discovering the formatter  attribute in the use of the Table table in  Element UI , it can be used to format the value of the specified column, accept a Function, and pass in two parameters: row and colum, which can be processed according to your own needs. The operation of installing and configuring moment.js is eliminated, and the efficiency and performance are higher.

 

Steps:

1. Add  the formatter  attribute in the attribute column of the el-table-column of the binding time column

                         <el-table-column
                            v-if=" stateTag == 0 "
                            prop="create_time"
                            :formatter="formatTime"
                            label="录入时间"
                            align="center"
                         ></el-table-column>

 2. Define the function method of this attribute in methods, and process the time format accordingly (here is only the time data format I need here, the specific format processing should be determined according to your own needs, the principle is the same, the problem is not big)

                   // 时间格式化
                   formatTime(row, column){
                     let data = row[column.property]
                     let dtime = new Date(data)
                     const year = dtime.getFullYear()
                     let month = dtime.getMonth() + 1
                     if (month < 10) {
                       month = '0' + month
                     }
                     let day = dtime.getDate()
                     if (day < 10) {
                       day = '0' + day
                     }
                     let hour = dtime.getHours()
                     if (hour < 10) {
                       hour = '0' + hour
                     }
                     let minute = dtime.getMinutes()
                     if (minute < 10) {
                       minute = '0' + minute
                     }
                     let second = dtime.getSeconds()
                     if (second < 10) {
                       second = '0' + second
                     }
                     return year+ '-' + month+ '-' + day + ' ' + hour + ':' + minute + ':' + second
                   },

 3. After running for a while, the effect came out. It was still very good and met the expectation.

---

The following are related time processing articles, welcome to communicate, and hope to be helpful to you! ! !

Date time picker "shortcut option" : element DateTimePicker date time picker, for the specific time data returned by the interface, do "shortcut time range option" processing

Realization of simple timer effect: Realization of JavaScript simple countdown effect