使用Element ui中el-table时，想要el-table-column里同时显示两个字段，如同时显示日期和时间

♡成成成

于 2023-04-07 11:12:25 发布

阅读量1.9k

点赞数 1

文章标签： vue.js elementui 前端

本文链接：https://blog.youkuaiyun.com/qq_53857666/article/details/130007760

版权

文章展示了如何在前端利用ElementUI的el-table-column组件，结合后台返回的startDate,startTime,endDate和endTime两个字段，来展示巡检的开始和结束时间。通过templateslot-scope，将日期和时间合并显示在表格中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-table-column></el-table-column>要展示的数据来自后台返回的两个字段，用法如下：

          <el-table-column
            align="center"
            label="巡检开始时间"
            prop="startDate,startTime"
            width="160px"
          >
            <template slot-scope="scope">
              {{ scope.row.startDate }}/{{ scope.row.startTime }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="巡检结束时间"
            prop="endDate,endTime"
            width="160px"
          >
          <template slot-scope="scope">
              {{ scope.row.endDate }}/{{ scope.row.endTime }}
            </template>
          </el-table-column>