Property-admin/src/pages/GreenClean/GreeningInspection/index.vue

<template>
  <div class="app-container">
    <div class="filter-container">
       <el-button type="primary">新增</el-button> 
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      class="center">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="source" label="所属公司" align="center"></el-table-column>
      <el-table-column prop="date" label="绿化编码" align="center"></el-table-column>
      <el-table-column prop="date" label="绿化名称" align="center"></el-table-column>
      <el-table-column prop="room" label="检查时间" align="center"></el-table-column>
      <el-table-column prop="handler" label="检查情况" align="center"></el-table-column>
      <el-table-column prop="subject" label="处理情况" align="center"></el-table-column>
      <el-table-column prop="state" label="检查人" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      }
    },

    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          room: '2016-05-02',
          handler: '上海',
          subject: '普陀区',
          source: '上海市普陀区金沙江路 1518 弄',
          state: 'admin',
          remarks: '11111'
        }]
      }
    }
  }
</script>

<style scoped>
.center {
    text-align: center
}
.app-container {
  padding: 20px;
}
.filter-container {
    text-align: left;
    margin-bottom: 20px;
}
</style>