iview 动态删除table的某一列

45 篇文章 1 订阅
17 篇文章 0 订阅

有时候我们需要让Table组件不显示某行,如何实现?(基于iview),我们可以在初始化的时候把列全部取出来,在具体使用的时候在根据逻辑来处理,直接上代码:

<template>
  <div style="width:600px;margin:0 auto">
    <Tabs value="normal" @on-click="changeTab">
      <TabPane label="查询" name="normal">
        <Table :columns="dynamicColumns" :data="data"></Table>
      </TabPane>
      <TabPane label="查询已支付" name="pay">
        <Table :columns="dynamicColumns" :data="data"></Table>
      </TabPane>
      <TabPane label="未开票" name="invoive">
        <Table :columns="dynamicColumns" :data="data"></Table>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
export default {
    
  name: 'Home',
  data () {
    
    return {
    
      dynamicColumns: [], // table动态绑定的列
      columns: [
        {
    
          title: '订单号',
          key: 'order'
        },
        {
    
          title: '仓库SN',
          key: 'sno'
        },
        {
    
          title: '金额',
          key: 'amount'
        }
      ],
      // 数据
      data: [
        {
    
          order: 'JD202109010412579344',
          sno: 'MKD202109010412579344',
          amount: '182000',
        },
        {
          order: 'JD202109010412579344',
          sno: 'MKD202109010412579344',
          amount: '182000',
        },
        {
         order: 'JD202109010412579344',
          sno: 'MKD202109010412579344',
          amount: '182000',
        },
      ]
    }
  },
  methods: {
    changeTab (name) {
	   // 删除某一列
        this.dynamicColumns.forEach((item, index) => {
          if (name == 'normal' || name == 'pay') { 
               if (item.title == '金额') {
                  this.dynamicColumns.splice(index, 1)
               } 
          }
        })
      this.getlist()
    },
    getlist () {
      this.dynamicColumns = [] // 赋值
      this.columns.forEach(item => {
        this.dynamicColumns.push(item)
      })
    }
  },
  created () {
    this.getlist()
  },
}
</script>

下面可以看看效果图:

另外一种是直接删除某些列,使用:

this.columns = this.columns.filter(col => col.key !== 'xxx')

但是这种就适合在一些固定的条件下,不是动态的来处理,也就是条件时固定的,比如根据权限来决定展示那些列,隐藏那些列。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值