iview table 如何在一定的条件下隐藏/显示某一整列

Question

问题描述

iview table 如何在一定的条件下隐藏/显示某一整列

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

在卡号没有时就只显示工号姓名两列及内容

Answer 1

可以看下iview的table文档里“高级示例”

搬运代码如下：

<template>
    <Checkbox-group v-model="tableColumnsChecked" @on-change="changeTableColumns">
        <Checkbox label="show">Show</Checkbox>
        <Checkbox label="weak">Weak</Checkbox>
        <Checkbox label="signin">Signin</Checkbox>
        <Checkbox label="click">Click</Checkbox>
        <Checkbox label="active">Active</Checkbox>
        <Checkbox label="day7">7, retained</Checkbox>
        <Checkbox label="day30">30, retained</Checkbox>
        <Checkbox label="tomorrow">The next day left</Checkbox>
        <Checkbox label="day">Day Active</Checkbox>
        <Checkbox label="week">Week Active</Checkbox>
        <Checkbox label="month">Month Active</Checkbox>
    </Checkbox-group>
    <Table :data="tableData2" :columns="tableColumns2" border></Table>
</template>
<script>
    export default {
        data () {
            return {
                tableData2: this.mockTableData2(),
                tableColumns2: [],
                tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month']
            }
        },
        methods: {
            mockTableData2 () {
                let data = [];
                function getNum() {
                    return Math.floor(Math.random () * 10000 + 1);
                }
                for (let i = 0; i < 10; i++) {
                    data.push({
                        name: 'Name ' + (i+1),
                        fav: 0,
                        show: getNum(),
                        weak: getNum(),
                        signin: getNum(),
                        click: getNum(),
                        active: getNum(),
                        day7: getNum(),
                        day30: getNum(),
                        tomorrow: getNum(),
                        day: getNum(),
                        week: getNum(),
                        month: getNum()
                    })
                }
                return data;
            },
            getTable2Columns () {
                const table2ColumnList = {
                    name: {
                        title: 'Name',
                        key: 'name',
                        fixed: 'left',
                        width: 200,
                        render: (h, params) => {
                            const fav = this.tableData2[params.index].fav;
                            const style = fav === 0 ? {
                                cursor: 'pointer'
                            } : {
                                cursor: 'pointer',
                                color: '#f50'
                            };

                            return h('div', [
                                h('Icon', {
                                    style: style,
                                    props: {
                                        type: fav === 0 ? 'ios-star-outline' : 'ios-star'
                                    },
                                    nativeOn: {
                                        click: () => {
                                            this.toggleFav(params.index);
                                        }
                                    }
                                }),
                                h('span', ' ' + params.row.name)
                            ]);
                        }
                    },
                    show: {
                        title: 'Show',
                        key: 'show',
                        width: 150,
                        sortable: true
                    },
                    weak: {
                        title: 'Weak',
                        key: 'weak',
                        width: 150,
                        sortable: true
                    },
                    signin: {
                        title: 'Signin',
                        key: 'signin',
                        width: 150,
                        sortable: true
                    },
                    click: {
                        title: 'Click',
                        key: 'click',
                        width: 150,
                        sortable: true
                    },
                    active: {
                        title: 'Active',
                        key: 'active',
                        width: 150,
                        sortable: true
                    },
                    day7: {
                        title: '7, retained',
                        key: 'day7',
                        width: 150,
                        sortable: true
                    },
                    day30: {
                        title: '30, retained',
                        key: 'day30',
                        width: 150,
                        sortable: true
                    },
                    tomorrow: {
                        title: 'The next day left',
                        key: 'tomorrow',
                        width: 150,
                        sortable: true
                    },
                    day: {
                        title: 'Day Active',
                        key: 'day',
                        width: 150,
                        sortable: true
                    },
                    week: {
                        title: 'Week Active',
                        key: 'week',
                        width: 150,
                        sortable: true
                    },
                    month: {
                        title: 'Month Active',
                        key: 'month',
                        width: 150,
                        sortable: true
                    }
                };

                let data = [table2ColumnList.name];

                this.tableColumnsChecked.forEach(col => data.push(table2ColumnList[col]));

                return data;
            },
            changeTableColumns () {
                this.tableColumns2 = this.getTable2Columns();
            },
            toggleFav (index) {
                this.tableData2[index].fav = this.tableData2[index].fav === 0 ? 1 : 0;
            }
        },
        mounted () {
            this.changeTableColumns();
        }
    }
</script>

Answer 2

如果显示十行数据的话，你指的是这十行都没有卡号这个数据，然后把卡号这一列删除？

这很简单
假定你后端获取到数据list

1 来个变量sign=0

2 遍历list 看看每行的卡号的值是否都不存在，不存在的话sign+1

3 遍历完成后看sign是否等于list长度 等于的话 把columns删除掉卡号那一项

Answer 3

你好，我也遇到同样的问题，请问有解决方法吗

Answer 4

很简单，修改table的columns属性，根据你的条件去修改columns，需要则把那一列放上，否则删掉

隐藏／显示某一列的话则修改data属性，对于的那条数据删掉就好了

Answer 5

我只是一个搬运工
在iview.js中找到如下的columns那一部分替换为下面写的，就可以在多表头的情况下动态改变iview table绑定的columns
不知道是不是你想要的结果

I have found a solution

1.open node_modulesiviewdistiview.js

2.find(near line:21336)

columns: {
            handler: function handler() {
                var colsWithId = this.makeColumnsId(this.columns);
                this.allColumns = (0, _util.getAllColumns)(colsWithId);
                this.cloneColumns = this.makeColumns(colsWithId);

                this.columnRows = this.makeColumnRows(false, colsWithId);
                this.leftFixedColumnRows = this.makeColumnRows('left', colsWithId);
                this.rightFixedColumnRows = this.makeColumnRows('right', colsWithId);
                this.rebuildData = this.makeDataWithSortAndFilter();
                this.handleResize();
            
            },

            deep: true
        },

3.replace with

 columns: {
            handler: function handler() {
                //[Fix Bug]You may have an infinite update loop in watcher with expression "columns"
                var tempClonedColumns  = (0, _assist.deepCopy)(this.columns);
                var colsWithId = this.makeColumnsId(tempClonedColumns);
                //[Fix Bug End]
                this.allColumns = (0, _util.getAllColumns)(colsWithId);
                this.cloneColumns = this.makeColumns(colsWithId);

                this.columnRows = this.makeColumnRows(false, colsWithId);
                this.leftFixedColumnRows = this.makeColumnRows('left', colsWithId);
                this.rightFixedColumnRows = this.makeColumnRows('right', colsWithId);
                this.rebuildData = this.makeDataWithSortAndFilter();
                this.handleResize();
            
            },

            deep: true
        },

解决方案源地址（来自github）