el-table-column日期格式化

如果想对表格某一列的内容格式化，可用 formatter 属性。属性绑定格式化的方法即可

<!--时间范围-->
                                <el-table-column
                                        prop="startTime"
                                        label="开始时间"
                                        width="90"
                                        :formatter="formatDate">
                                </el-table-column>
                                <el-table-column
                                        prop="endTime"
                                        label="结束时间"
                                        width="90"
                                        :formatter="formatDate">
                                </el-table-column>

methods: {
            //方法区
            formatDate(row, column) {
                // 获取单元格数据
                let data = row[column.property]
                if(data == null) {
                    return null
                }
                let dt = new Date(data)
                 return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
            },
    }

页面代码

<el-tabs v-model="activeName" @tab-click="handleClick">
            <!--选项卡：统计总览-->
            <el-tab-pane :label="$t('sline.mocar.specOverView')" name="first">
                <div style="margin-top: 10px; margin-left: 10px;">
                    <el-form :inline="true" label-width="140px">
                        <!--规格-->
                        <el-form-item :label="$t('sline.mocar.specName')">
                            <el-select v-model="specification"  clearable>
                                <el-option v-for="(item, index) in specificationList" :key="index" :value="item.spec_id" :label="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                        <!--日期范围-->
                        <el-form-item :label="$t('sline.UtilizationStatistics.startAndEndDate')">
                            <el-date-picker v-model="dateScope" type="datetimerange" :range-separator="$t('sline.UtilizationStatistics.to')"
                                            :start-placeholder="$t('sline.UtilizationStatistics.startDate')" :end-placeholder="$t('sline.UtilizationStatistics.endDate')">
                            </el-date-picker>
                        </el-form-item>

                        <!--搜索框-->
                        <el-form-item>
                            <el-button style="margin-left: 90px;" type="primary" @click="getSpecTypeOfSlineCapaTimeScope()">{{$t('sline.mocar.query')}}</el-button>
                        </el-form-item>
                    </el-form>
                    <!--列表-->
                    <div v-for="item in SpecToSlineAllCapaVoS">
                        <el-card class="box-card" >
                            <el-form ref="form" :model="item" label-width="80px">
                                <el-form-item label="规格ID: " >
                                    <el-input v-model="item.specId" :disabled="true" ></el-input>
                                </el-form-item>
                                <el-form-item label="规格名称: ">
                                    <el-input v-model="item.specName" :disabled="true" ></el-input>
                                </el-form-item>
                            </el-form>
                            <el-divider></el-divider>
                            <!--流水线信息-->
                            <el-table
                                    :data="item.slineAllCapaVoList"
                                    stripe
                                    style="width: 100%">
                                <el-table-column
                                        prop="slineName"
                                        label="流水线名称"
                                        width="110">
                                </el-table-column>
                                <el-table-column
                                        prop="allCapas"
                                        label="总产能"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        prop="allAvaCapas"
                                        label="总可用"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        prop="allBeUsedCapas"
                                        label="总被占用"
                                        width="100">
                                </el-table-column>
                                <!--时间范围-->
                                <el-table-column
                                        prop="startTime"
                                        label="开始时间"
                                        width="90"
                                        :formatter="formatDate">
                                </el-table-column>
                                <el-table-column
                                        prop="endTime"
                                        label="结束时间"
                                        width="90"
                                        :formatter="formatDate">
                                </el-table-column>
                                <el-table-column
                                        prop=""
                                        label="更多操作"
                                        width="70">
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>