<template>
  <div >
    <el-col class="cell" v-for="item in tableData" :key="item">
        <el-row>{{item.road}}</el-row>
        <el-row>{{item.length}}</el-row>
        <el-row>{{item.dept}}</el-row>
    </el-col>
  </div>
</template>

<script>

export default {
  data(){
    return{
      tableData:[
        {
          road: '所属街道',
          length: '管线长度km',
          dept: '权属单位',
        },
        {
          road: '双山西街',
          length: '54',
          dept: '圣井燃气',
        },
        {
          road: '绣水大街',
          length: '32',
          dept: '正和燃气',
        },
        {
          road: '鲁宏大街',
          length: '44',
          dept: '正和燃气',
        },
        {
          road: '清照大街',
          length: '10',
          dept: '中燃燃气',
        },
        {
          road: '福泰路',
          length: '2',
          dept: '中燃燃气',
        },
        {
          road: '唐王山路',
          length: '37',
          dept: '圣井燃气',
        },
        {
          road: '经十东路',
          length: '43',
          dept: '圣井燃气',
        }
      ]
    }
  }
}
</script>

<style lang="scss" >
 .cell{
    width: 100%;
    height: 30px;
    line-height: 30px;
    display: flex;
    text-align:center;
      color: #AAEEEE;
    div{
        flex: 1;
    }
 }
 .cell:nth-child(odd) {
    border-bottom: #AAEEEE;
    background: transparent;
 }
 .cell:nth-child(even){
    background: #141441;
 }

</style>