<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: '0.261',
          dept: '济南中燃',
        },
        {
          road: '锦绣花园东区',
          length: '0.43',
          dept: '济南中燃',
        },
        {
          road: '城建景园',
          length: '0.079',
          dept: '济南中燃',
        },
        {
          road: '鲁宏宿舍',
          length: '0.327',
          dept: '济南中燃',
        },
        {
          road: '汽配厂宿舍',
          length: '0.073',
          dept: '济南中燃',
        },
        {
          road: '丽园花园',
          length: '0.251',
          dept: '济南中燃',
        },
        {
          road: '金梦轩',
          length: '0.188',
          dept: '济南中燃',
        },
        {
          road: '实验二中宿舍',
          length: '0.126',
          dept: '济南中燃',
        },
        {
          road: '宏昌西区',
          length: '0.052',
          dept: '济南中燃',
        },
        {
          road: '宏昌新座',
          length: '0.079',
          dept: '济南中燃',
        },
        {
          road: '银座上城',
          length: '0.239',
          dept: '济南中燃',
        },
        {
          road: '妇幼办健院宿舍',
          length: '0.375',
          dept: '济南中燃',
        },
        {
          road: '福园小区',
          length: '0.115',
          dept: '济南中燃',
        },
        {
          road: '广电宿舍',
          length: '0.274',
          dept: '济南中燃',
        },
        {
          road: '新世纪',
          length: '1.008',
          dept: '济南中燃',
        },
        {
          road: '经十路',
          length: '4.918',
          dept: '圣井燃气',
        },
        {
          road: '潘王路',
          length: '2.879',
          dept: '圣井燃气',
        },
        {
          road: '中学路',
          length: '1.452',
          dept: '圣井燃气',
        },
        {
          road: '三号路中压',
          length: '4.831',
          dept: '圣井燃气',
        },
        {
          road: '三号路',
          length: '1.013',
          dept: '圣井燃气',
        },
        {
          road: '明堂路支线',
          length: '0.3',
          dept: '正和燃气',
        },
        {
          road: '绣阳路支线',
          length: '1.866',
          dept: '正和燃气',
        },
        {
          road: '建陶城外线',
          length: '0.246',
          dept: '正和燃气',
        },
        {
          road: '中石化双山门站',
          length: '5.956',
          dept: '华润燃气',
        },
        {
          road: '华民路',
          length: '1.977',
          dept: '华润燃气',
        },
        {
          road: '城东园区',
          length: '1.875',
          dept: '华润燃气',
        },
        {
          road: '中小企业园',
          length: '0.898',
          dept: '华润燃气',
        },
        {
          road: '滨湖路',
          length: '1.097',
          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>