iview 动态删除table的某一列

有时候我们需要让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')

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

Guess you like

Origin blog.csdn.net/lchmyhua88/article/details/121217859