<template>
  <div class="test1-container">
     <el-table :data="tableData" style="width:550px;margin:0 auto;margin-top:30px;" border :row-style="tableRowStyle"
    :header-cell-style="tableHeaderColor" :height="tableHeight">
      <el-table-column prop="date" label="日期(居右)" width="180" align="right" header-align="center">
      </el-table-column>
      <el-table-column prop="name" label="姓名(居中)" width="180" align="center" header-align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址(居左)" width="180" align="left" header-align="center" show-overflow-tooltip >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name:'test1',
    data() {
      return {
        tableHeight:'',
        tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, 
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, 
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, 
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }
        ],
      }
   },
   created(){
     this.tableHeight = window.innerHeight-500
   },
   methods:{
     // 修改table tr行的背景色
    tableRowStyle({ row, rowIndex }) {
      return 'background-color: #F7F6Fd'
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: lightblue;color: #fff;font-weight: 500;'
      }
    }
   }
}
</script>
<style lang="scss" scoped>
.test1-container{

}
</style>