带斑马纹表格的组件

一、示例如下图

代码如下：

<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script> export default {

data() {
      return {
        tableData: [{
          date: '2018-05-02',
          name: '小王',
          address: ' 北京'
        }, {
          date: '2018-05-04',
          name: '小八',
          address: '上海'
        }, {
          date: '2017-05-01',
          name: '小哈',
          address: '小小'
        }, {
          date: '2019-05-03',
          name: '大大',
          address: '广州'
        }]
      }
    }

}

</script>