Gyyq-Upstairs/src/views/components/analysis/projectList.vue

<template>
    <div class="projectList">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="项目名称"
          width="170">
          <template slot-scope="scope">
            <span style="color: #2B62F1;">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="所在区域">
        </el-table-column>
        <el-table-column
          prop="data"
          label='总投资额(万元)'
          width="88"
          >
        </el-table-column>
        <el-table-column
          prop="data"
          label='建筑面积(万平方米)'
          width="88">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="70">
          <template slot-scope="scope">
            <span :style="getStatusColor(scope.row.status)">{{ scope.row.status }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        tableData: [
          {
            date: '2016-05-02',
            name: '大众电脑生成制造基地',
            address: '高贸区',
            data: '1000',
            status: '在建'
          },
          {
            date: '2016-05-04',
            name: '大众电脑生成制造基地',
            address: ' 科创区',
            data: '1500',
            status: '拟建'
          },
          {
            date: '2016-05-01',
            name: '大众电脑生成制造基地',
            address: ' 度假区',
            data: '2000',
            status: '已建'
          },
          {
            date: '2016-05-03',
            name: '大众电脑生成制造基地',
            address: ' 苏相合作区',
            data: '2500',
            status: '在建'
          }
        ],
      }
    },
    methods: {
      getStatusColor(status) {
        switch (status) {
          case '在建':
            return 'color: #2DD29F;';
          case '拟建':
            return 'color: #F08445;';
          case '已建':
            return 'color: #2B62F1;';
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .projectList {
    padding: 0 .5rem 0rem 0;
    height: 15rem;
    overflow-y: auto; 
  }
  
  </style>