表格某列在右对齐后，整体向左移动一段距离

h_6543210

已于 2022-06-02 14:32:33 修改

阅读量380

点赞数

文章标签： vue.js 前端 elementui

于 2022-05-31 10:42:24 首次发布

本文链接：https://blog.csdn.net/m0_68428581/article/details/125058884

版权

本文介绍了一个关于优化电子表格展示的例子，通过修改`cell-style`参数，将发起时间这一列的样式进行了调整，增加了右侧内边距，以提高数据可读性和界面美观度。代码中展示了如何使用`pdateFormat`方法对日期进行格式化，并定义了`createTimeStyle`方法来设置第7列的样式。此外，还通过自定义的 scoped CSS 为时间列添加了额外的内边距。

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

1.以“发起时间”为例，实现效果如下

（1）修改前

（2）修改后

2.代码

主要使用cell-style参数，具体代码：

<el-table
      v-loading="loading"
      height="535"
      :cell-style="createTimeStyle"
    >
     <el-table-column
        label="发起时间"
        align="right"
        prop="createTime"
        width="200"
        :formatter="pdateFormat"
        class-name="time"
      />
</el-table>

 methods: {
    // 日期格式化
    pdateFormat(row, column) {
      if (row.createTime) {
        return row.createTime.slice(0, 10);
      }
    },
    createTimeStyle(column) {
      //第7列
      if(column.columnIndex == 7) {
        return "padding-right: 60px"
      }
    },
}

<style coped>
 .el-table th.el-table__cell.time > .cell{
   padding-right: 70px;
 }
</style>