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>

效果示例：

到此結束