vue iview UI 隐藏Table组件里的某些列

我们在做Table的时候经常会根据一些条件需要进行隐藏。因此是否可以提供这样一个显示隐藏的属性，能够设置某列是隐藏的呢？

下面来看看效果：

 现在视图里面加上动态列：

 <Table height="600" ref="selection" :columns="dynamicColumns" :data="stockData" :loading="loading" >
        <template slot-scope="{ row }" slot="name">
          <strong>{
   
   { row.name }}</strong>
        </template>
        <template slot-scope="{ row, index }" slot="action">
        </template>
</Table>

 在初始化的时候给列赋值：

data() {
            return {
                columns: [
                    {
                        title: "客户代码",
                        key: "fmcustomer",
                        align: "center",
                        width: 200,
                    },
                    {
                        title: "SKU单号",
                        key: "docno",
                        align: "center",
                        width: 200,
                    },
                    {
                        title: "SKU代码",
                        key: "tosku",
                        align: "center",
                        width: 200,
                    },
                    {
                        title: "入库数量",
                        key: "qty",
                        align: "center",
                        width: 120,
                    },
                    {
                        title: "出货数量",
                        key: "outqty",
                        align: "center",
                        width: 120,
                    },
                    {
                        title: "库存数量",
                        key: "stockqty",
                        align: "center",
                        width: 120,
                    },
                    {
                        title: "分配数量",
                        key: "assignqty",
                        align: "center",
                        width: 120,
                    },
                    {
                        title: "锁定数量",
                        key: "lockqty",
                        align: "center",
                        width: 120,
                    },
                  
                ],
                dynamicColumns: [],
            }
        },

在获取列表的时候进行动态赋值：

methods: {
            getStockData(page, pageSize, search_from){
                this.dynamicColumns = [] // 赋值
                this.columns.forEach(item => {
                    this.dynamicColumns.push(item)
                }) 
               

                pdd.stock(search_from)
                    .then(function (response) { 

                        //设置动态列
                        this.setDynamicColumns()

                        if (response.data.status != 1)) {
                            this.$Message.error(response.data.message)
                        } else {
                            this.stockData = response.data.stock
                            this.total = response.data.total

                        }
                    });

            },
            setDynamicColumns () {
                if(this.formSearch.tab == 'in') { //入库
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'outqty')
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'stockqty')
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'assignqty')
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'lockqty')
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'moveinqty')
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'moveoutqty')
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'adjustqty')
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'usableqty')
                } else if(this.formSearch.tab == 'out'){ //出库
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'qty')
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'stockqty')
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'assignqty')
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'lockqty')
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'moveinqty')
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'moveoutqty')
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'adjustqty')
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'usableqty')
                } else if(this.formSearch.tab == 'stock'){ //库存
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'qty')
                    this.dynamicColumns = this.dynamicColumns.filter(col => col.key !== 'outqty')
                }
            },
 
            handleTabClick(name) {//切换tab,获取相应的数据
                //清空之前的
                this.stockData = []

                if (name == 'in') { //入库
                    this.formSearch.tab = 'in'
                } else if (name == 'outbound') { //出库
                    this.formSearch.tab = 'out'
                } else {                        //库存
                    this.formSearch.tab = 'stock'
                }
                this.getStockData(this.page, this.pageSize, this.formSearch)
             },
            },

这样就可以根据条件动态的隐藏某些列了。