<template>
  <div class="home-addressbook">
    <div class="d-content">
      <el-table :data="tableDataNew" stripe border style="width: 100%">
        <el-table-column prop="name" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="80">
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="80">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'home-addressbook',
    components: {},
    data() {
      return {
        tableData: []
      }
    },
    computed: {
      // 使用计算属性 过滤数组数据
      // 也可以直接在getData中使用 filter 过滤
      tableDataNew: function () {
        return this.tableData.filter((data) => {
          return data.name !== 'admin'
        })
      }
    },
    watch: {},
    methods: {
      getData () {
        this.$get('api接口').then((res) => {
          this.tableData = res.data
        }, error => {
          console.log(error)
        })
      }
    },
    created() {
      this.getData()
    },
    mounted() {
    },
    beforeDestroy() {}
  }
</script>

<style lang='scss' scoped>
  .home-addressbook {
    width: 100%;
    height: 100%;
  }

  .d-header {
    color: white;
  }

</style>