SOURCE

var Main = {
    data() {
        return {
            checkedKeys: ['root'],
            expandedKeys: [],
            selectedKeys: [],
            columns: this.tree([
                {
                    field: 'name',
                    title: 'Name',
                },
                {
                    field: 'sex',
                    title: 'Sex'
                },
                {
                    field: 'date',
                    title: 'Date'
                },
                {
                    field: 'address',
                    title: 'Address'
                },
                {
                    title: '多级表头',
                    children: [
                        {
                            title: '子表头一',
                            field: 'f1'
                        },
                        {
                            title: '子表头二',
                            field: 'f2'
                        }
                    ]
                }
            ]),
            tableData: []
        }
    },
    created() {
        var list = []
        for (var index = 0; index < 5; index++) {
            list.push({
                name: 'test' + index,
                role: 'developer',
                sex: 'Man',
                date: '2019-05-01',
                time: 1556677810888 + index * 500,
                region: 'ShenZhen',
                address: 'address abc' + index
            })
        }
        this.tableData = list
    },
    methods: {
        showPanel() {
            this.$refs.xDown.showPanel()
        },
        refreshColumn() {
            this.$refs.xGrid.refreshColumn()
        },
        getTableColumn() {
            return this.$refs.xGrid.getTableColumn()
        },
        onCheck (keys) {
            const columns = this.$refs.grid.getTableColumn().fullColumn
            if (keys.length === 0) {
                for (const col of columns) {
                col.visible = false
                }
            } else {
                const _cols = this.columnKey(
                this.columns.filter(e => ('title' in e && 'field' in e) || 'children' in e)
                ).flat(Infinity)
                const all = new Set(_cols.map(e => Object.keys(e)[0]))
                const _keys = new Set(keys.filter(k => k !== 'root'))

                const diffKey = [...new Set([...all].filter(x => !_keys.has(x)))]
                const sameKey = [...new Set([..._keys].filter(x => all.has(x)))]
                diffKey.forEach(k => {
                const item = columns.find(col => col.property === Object.values(_cols.find(_col => _col[k]) || {})[0])
                    if (item) {
                        item.visible = false
                    }
                })
                sameKey.forEach(k => {
                const item = columns.find(col => col.property === Object.values(_cols.find(_col => _col[k]) || {})[0])
                    if (item) {
                        item.visible = true
                    }
                })
            }
            this.$refs.grid.refreshColumn()
        },
        tree (array, parentKey) {
            for (let index = 0; index < array.length; index++) {
                const element = array[index]
                element.key = parentKey === void 0 ? element.title : parentKey + '-' + element.title
                if ('children' in element) {
                    this.tree(element.children, element.title)
                }
            }

            return array
        },
        columnKey (columns) {
            return columns.map(col => (col.children ? this.columnKey(col.children) : { [col.key]: col.field }))
        }
    },
    mounted() {
        this.expandedKeys = this.columnKey(this.columns.filter(e => 'children' in e))
                                .flat(Infinity)
                                .map(e => Object.keys(e)[0])
                                .concat('root')
        
    }
};

Vue.use(antd)

var app = new Vue(Main).$mount('#app')

<script src="https://cdn.jsdelivr.net/npm/vue">

</script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils">

</script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table">

</script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->

<!-- antd vue ui lib -->
<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.5/dist/antd.min.js">

</script>

<div id="app">
	<template>
		<div>
            <vxe-pulldown ref="xDown">
              <template v-slot>
                <a-button @click="showPanel">可见列</a-button>
              </template>
              <template v-slot:dropdown>
                <div class="visible-columns">
                    <a-tree
                        v-model="checkedKeys"
                        checkable
                        :expanded-keys="expandedKeys"
                        auto-expand-parent
                        :selected-keys="selectedKeys"
                        :tree-data="[
                            {
                                key: 'root',
                                title: '全部',
                                children: columns.filter(e => ('title' in e && 'field' in e) || 'children' in e)
                            }
                        ]"
                        @check="onCheck"
                    >
                        <template #switcherIcon></template>
                    </a-tree>
                </div>
              </template>
            </vxe-pulldown>

			<vxe-grid ref="grid" align="center" border :columns="columns" :data="tableData">	
			</vxe-grid>
		</div>
	</template>
</div>

@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");
@import url("https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.5/dist/antd.min.css");

.visible-columns {
    overflow: auto;
    display: flex;
    min-width: 110px;
    max-height: 25rem;
    flex-direction: column-reverse;
    position: absolute;
    left: 0;
    background-color: rgba(255, 255, 255, 0.637);
}

.visible-columns .ant-checkbox-wrapper {
    margin: 0;
}

.visible-columns .ant-checkbox-wrapper >:not(.ant-checkbox) {
    padding: 0 !important;
}