我们在做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)
},
},
这样就可以根据条件动态的隐藏某些列了。