elementUI table表格表头右对齐

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

代码示例：

<template>
  <el-table class="numtable" :data="tableData" style=" 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>

效果示例：

到此结束