vue el-table使用

<template>
<div style="margin: 20px;">//在el-table外层设置div 设置边距防止宽度超出屏幕滑动
        <el-table
        border
        :cell-style="{color:'#ff0000'}"//非标头样式设置
        :header-cell-style="{background:'#004d8c',color:'#ffffff'}"//表头样式设置
            :data="tableData"//数组
            style="width: 100%;"
            :row-class-name="tableRowClassName"
            
        
          >
//prop:数组字段  label表头字段     align 表格中字体居中
            <el-table-column prop="date" label="Date" align="center"  />
            <el-table-column prop="name" label="Name"  align="center"/>
            <el-table-column prop="address" label="Address" align="center"/>
          </el-table>
          </div>
</template>
<script>
export default {
data() {

            return {
tableData:[
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
}
}
}
</script>