iView组件动态控制表格列的显示与隐藏

需求：

1. 根据当前登录用户角色动态控制是否展示业务经理查看状态列和大区经理查看状态列
2. 列表中为金额的列，其值如果全为0则该列不展示

实现：

<!-- 此处的Tablepage为重新封装过后的表格组件 -->
<template>
	<div>
		<Tablepage ref="table" :data="listData" :total="total" :columns="newColumns" :pagination="true" border @change-page="onChangePage" @reset="onReset" @on-current-change="onCurrentChange" @on-selection-change="onSelectionChange" show-btn :init-data="false">
			<template slot="searchform">
				<!-- ......此处省略查询条件 -->
			</template>
		</Tablepage>
	</div>
</template>

<script>
	import { rowChangeMixin } from '@/mixins/table'
	import { numFormat } from '@/libs/util'
	import { getListData } from '@/api/reports'
	import { getUserInfo } from '@/api/user'
	
	export default {
        name: 'HelloWorld',
        mixins: [rowChangeMixin],
        data() {
            return {
            	queryParams: {
            		empNo: '',
            		deptName: '',
            		// ...
            	},
            	userType: null, // 1-业务经理  2-大区经理  0-其他
                newColumns: [],
                columns: [
                    {
                        type: 'selection',
                        width: 50,
                        align: 'center'
                    },
                    {
                        type: 'index',
                        width: 50,
                        align: 'center'
                    },
                    {
                        title: '工号',
                        key: 'empNo',
                        width: 80,
                        align: 'center'
                    },
                    {
                        title: '姓名',
                        key: 'empName',
                        width: 100
                    },
                    {
                        title: '部门',
                        key: 'deptName',
                        minWidth: 180
                    },
                    {
                        title: '金额1',
                        key: 'money1',
                        width: 120,
                        align: 'right',
                        isMoney: true,
                        render(h, params) {
                            return h('span', null, numFormat(params.row.money1))
                        }
                    },
                    {
                        title: '金额2',
                        key: 'money2',
                        width: 120,
                        align: 'right',
                        isMoney: true,
                        render(h, params) {
                            return h('span', null, numFormat(params.row.money2))
                        }
                    },
                    {
                        title: '金额3',
                        key: 'money3',
                        width: 120,
                        align: 'right',
                        isMoney: true,
                        render(h, params) {
                            return h('span', null, numFormat(params.row.money3))
                        }
                    },
                    {
                        title: '金额4',
                        key: 'money4',
                        width: 120,
                        align: 'right',
                        isMoney: true,
                        render(h, params) {
                            return h('span', null, numFormat(params.row.money4))
                        }
                    },
                    {
                        title: '金额5',
                        key: 'money5',
                        width: 120,
                        align: 'right',
                        isMoney: true,
                        render(h, params) {
                            return h('span', null, numFormat(params.row.money5))
                        }
                    }
                ],
                list: (queryParams) => {
                	return getListData(Object.assign({ ...this.queryParams }, queryParams))
                }
            }
        },
        mounted() {
        	this.getUserInfo()
        },
        methods: {
        	// 获取当前登录用户角色
            getUserInfo() {
                getUserInfo().then(res => {
                    let data = res.data.data
                    this.userType = data.roleName == '业务经理' ? 1 : data.roleName == '大区经理' ? 2 : 0
                    // 设置当前登录用户为业务经理或大区经理时不展示业务经理查看状态和大区经理查看状态列
                    if (this.userType != 1 && this.userType != 2) {
                        let arr = [{
                            title: '业务经理查看状态',
                            key: 'ifManagerView',
                            align: "center",
                            width: 70,
                            render(h, { row }) {
                                return h("span", {
                                    style: {
                                        color: row.ifManagerView == '关闭' ? '#F56C6C' : '#67c23a'
                                    }
                                }, row.ifManagerView)
                            }
                        },
                        {
                            title: '大区经理查看状态',
                            key: 'ifBigManagerView',
                            width: 70,
                            align: "center",
                            render(h, { row }) {
                                return h("span", {
                                    style: {
                                        color: row.ifBigManagerView == '关闭' ? '#F56C6C' : '#67c23a'
                                    }
                                }, row.ifBigManagerView)
                            }
                        }]
                        this.columns.push(...arr)
                    }
                    this.loadData(true)
                })
            },
            // 获取列表数据
            getList() {
            	this.setColumnsStatus(res.data.data.list)
            	this.listData = res.data.data.list
            	this.total = res.data.data.total
            },
            // 重置
            onReset() {
            	let data = this.$options.data().queryParams
            	Object.assign(this.queryParams, data)
            	this.onRefresh()
            },
            // 设置列表总金额全为0的列隐藏
            setColumnsStatus(data) {
                let newColumns = []
                for (let colItem of this.columns) {
                    let colLabel = colItem.key;
                    if (colLabel && colItem.isMoney) {
                        for (let item of data) {
                            if (item[colLabel] && item[colLabel] !== '0') {
                                newColumns.push({ ...colItem })
                                break
                            }
                        }
                    } else {
                        newColumns.push({ ...colItem })
                    }
                }
                this.newColumns = newColumns
            },
           // ......  此处省略其他代码
        }
	}
</script>