iview 动态删除table的某一列

code:

<template>
  <div style="width:600px;margin:0 auto">
    <Tabs value="name1" @on-click="changeTab">
      <TabPane label="标签一" name="name1">
        <Table :columns="columns" :data="data"></Table>
      </TabPane>
      <TabPane label="标签二" name="name2">
        <Table :columns="columns" :data="data"></Table>
      </TabPane>
      <TabPane label="标签三" name="name3">
        <Table :columns="columns" :data="data"></Table>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      columns: [], // table绑定的列
      columns1: [
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Age',
          key: 'age'
        },
        {
          title: 'Address',
          key: 'address'
        }
      ],
      // 数据
      data: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02'
        },
      ]
    }
  },
  methods: {
    changeTab (val) {
      this.getData()
      if (val === 'name2') {
        // 删除某一列
        this.columns.forEach((item, index) => {
          if (item.title == 'Age') {
            this.columns.splice(index, 1)
          }
        })
      }
    },
    getData () {
      this.columns = [] // 赋值
      this.columns1.forEach(item => {
        this.columns.push(item)
      })
    }
  },
  created () {
    this.getData()
  },
}
</script>

效果：