Property-admin/src/pages/Architecture/index.vue

<template>
  <div>
    <el-row type="flex" style="margin-top: 20px">
      <router-link to="">
        <el-button class="filter-item blue-black" type="primary">新增</el-button>
      </router-link>
    </el-row>
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px" >
      <el-table-column prop="address" label="小区" align="center"></el-table-column>
      <el-table-column prop="name" label="楼栋" align="center"></el-table-column>
      <el-table-column prop="province" label="单元" align="center"></el-table-column>
      <el-table-column prop="city" label="房号" align="center"></el-table-column>
      <el-table-column prop="date" label="电表" align="center"></el-table-column>
      <el-table-column prop="zip" label="水表" align="center"></el-table-column>
      <el-table-column prop="remarks" label="业主姓名" align="center"></el-table-column>
      <el-table-column prop="remarks" label="发票名称" align="center"></el-table-column>
      <el-table-column prop="remarks" label="联系电话" align="center"></el-table-column>
      <el-table-column prop="remarks" label="个人住址" align="center"></el-table-column>
      <el-table-column prop="remarks" label="银行名称" align="center"></el-table-column>
      <el-table-column prop="remarks" label="开户名" align="center"></el-table-column>
      <el-table-column prop="remarks" label="银行账号" align="center"></el-table-column>
      <el-table-column prop="remarks" label="账号类型" align="center"></el-table-column>
      <el-table-column prop="remarks" label="房屋类型" align="center"></el-table-column>
      <el-table-column prop="remarks" label="允许银行托盘(是/否)" align="center"></el-table-column>
      <el-table-column prop="remarks" label="参与收费(是/否)" align="center"></el-table-column>
      <el-table-column prop="remarks" label="建筑面积m²" align="center"></el-table-column>
      <el-table-column prop="remarks" label="所属楼层" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template scope="scope">
        <el-button @click="handleClick(scope.row)" 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",
          name: "1001",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: "-",
          remarks: "11111"
        }
      ]
    };
  }
};
</script>