有时候我们需要让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')
但是这种就适合在一些固定的条件下,不是动态的来处理,也就是条件时固定的,比如根据权限来决定展示那些列,隐藏那些列。