vue 过滤数组数据,可用于控制 el-table 某一行显示与否

<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>

 

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值