elementUI table表格表头右对齐

在使用VUE进行系统开发,常用的UI框架就是elementUI框架,在对金钱数字处理的时候,往往右对齐体验更佳,数据右对齐相对比较容易,稍微麻烦的就是单独的表头也要右对齐,下面就简单记录下:

代码示例:

<template>
  <el-table class="numtable" :data="tableData" style="width: 100%"
    :header-cell-class-name="headerStyle">
    <el-table-column prop="date" label="日期" width="100"></el-table-column>
    <el-table-column prop="name" label="姓名" width="100"></el-table-column>
    <el-table-column prop="money" label="金钱" width="100" align="right"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: 2016-05-02,
          name: 王小虎,
          money:33.52元,
          province: 上海,
          city: 普陀区,
          address: 上海市普陀区金沙江路 1518 弄,
          zip: 200333,
          tag: 
        }, {
          date: 2016-05-04,
          name: 王小虎,
          money:33.52元,
          province: 上海,
          city: 普陀区,
          address: 上海市普陀区金沙江路 1517 弄,
          zip: 200333,
          tag: 公司
        }, {
          date: 2016-05-01,
          name: 王小虎,
          money:33.52元,
          province: 上海,
          city: 普陀区,
          address: 上海市普陀区金沙江路 1519 弄,
          zip: 200333,
          tag: 
        }, {
          date: 2016-05-03,
          name: 王小虎,
          money:33.52元,
          province: 上海,
          city: 普陀区,
          address: 上海市普陀区金沙江路 1516 弄,
          zip: 200333,
          tag: 公司
        }],
      }
    },
    methods: {
      headerStyle({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 2) {
          return right-align
        }
      }
    }
  };
</script>
<style>
.right-align .cell{color: red; text-align: right;}
</style>

效果示例:

elementUI table表格表头右对齐

到此结束

elementUI table表格表头右对齐

上一篇:53.最大子序和


下一篇:LeetCode8. 字符串转换整数 (atoi)