element-ui 表格控制列顯隱簡單方案

核心是使用v-if控制列的顯隱

<template>
    <div>
        <div v-for="(item, index) in tables" :key="index">
            <el-table
                :data="item.data"
                @filter-change="value => filterChange(value,index, 'tables')"
                :span-method="value => cellMerge(value,'tables')"
                :header-cell-style="{background:'#fbfbfb'}"
                size="mini"
                doLayout
                border
            >
                <el-table-column
                    v-for="(ele,index) in item.columns"
                    :label="ele.text"
                    :prop="ele.value"
                    show-overflow-tooltip
                    v-if="ele.flag"
                    :key="ele.value + index"
                    :resizable="false"
                >
                    <template slot-scope="scope">
                        <span>{{scope.row[scope.column.property]}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    :key="item.columns.length + 1"
                    fixed="right"
                    width="50"
                    v-if="item.stash_columns"
                    :filters="item.stash_columns"
                    :filtered-value="item.filter_value"
                    :resizable="false"
                >
                    <template slot="header" slot-scope="scope">
                        <i class="el-icon-menu" style="cursor: pointer"></i>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>

export default {
    data () {
        return {
            tables: [
                {
                    data: [],
                    columns: [
                        {
                            text: '滴滴',
                            value: 'didi',
                            flag: true
                        },
                        {
                            text: '噠噠',
                            value: 'dada',
                            flag: true
                        },
                        {
                            text: '嘿嘿',
                            value: 'heihei',
                            flag: true
                        },
                        {
                            text: '哈哈',
                            value: 'haha',
                            flag: false
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        // 處理數據
        handlerData (type) {
            const data = [{didi: '11', dada: '22', heihei: '33', haha: '44'}]
            const tables = this[type]
            tables && tables.length > 0 && tables.map((item, index) => {
                this.$set(this[type][index], 'data', data)
                this.$set(this[type][index], 'stash_columns', item.columns)
                this.$set(this[type][index], 'filter_value', [])
                const columns = item.stash_columns
                const filter_value = item.filter_value
                columns && columns.length > 0 && columns.map((ele, idx) => {
                    if (ele.flag) {
                        filter_value.push(ele.value)
                    }
                })
                this.$set(this[type][index], 'filter_value', filter_value)
            })
        },
        // 控制列顯隱
        filterChange (value, idx, type) {
            switch (type) {
                case type:
                    for (const ele in value) {
                        this.$set(this[type][idx], 'show_columns', value[ele])
                    }
                    const tables = this[type]
                    tables && tables.length > 0 && tables.map((item, index) => {
                        const columns = item.columns
                        const show_columns = item.show_columns
                        if (show_columns && show_columns.length > 0) {
                            columns && columns.length > 0 && columns.map((val, key) => {
                                this.$set(this[type][index].columns[key], 'flag', false)
                                show_columns.map((ele) => {
                                    if (val.value === ele) {
                                        this.$set(this[type][index].columns[key], 'flag', true)
                                    }
                                })
                            })
                        }
                    })
                    break
                default:
                    break
            }
        },
        // 合並單元格
        cellMerge ({row, column, rowIndex, columnIndex}, type) {
            this.$nextTick(() => {
                const tables = this[type]
                tables && tables.length > 0 && tables.map((item, index) => {
                    const show_columns = item.show_columns
                    const length = show_columns && show_columns.length > 0 ? show_columns.length : item.columns.length
                    if (columnIndex === length - 1) {
                        return [1, 0]
                    } else if (columnIndex === length) {
                        return [0, 0]
                    }
                })
            })
        }
    },
    mounted () {
        this.handlerData('tables')
    }
}

</script>