SOURCE

const CustCol = {
    name: 'CustCol',
    template: `
        <el-dropdown><el-button size="mini">自定义列<i class="el-icon-arrow-down"></i></el-button>
          <el-dropdown-menu slot="dropdown" style="padding: 10px 20px 10px 4px;">
            <el-tree
                ref="colTree"
                :data="tableCols"
                node-key="key"
                :default-checked-keys="defaultCheckedKeys"
                show-checkbox
                @check="checkNode"
            ></el-tree>
          </el-dropdown-menu>
        </el-dropdown>
    `,
    props: {
        tableCols: Array
    },
    computed: {
        // 默认选中的节点 , 默认全选中
        defaultCheckedKeys() {
            const keys = []
            function travelCol(colList) {
                colList.forEach(col => {
                    keys.push(col.key)
                    if (Array.isArray(col.children) && col.children.length !== 0) {
                        travelCol(col.children)
                    }
                })
            }
            travelCol(this.tableCols)
            return keys
        }
    },
    methods: {
        // 选中节点时 , 重新计算列显示 , 不用 check-change 因为他有 bug, 不能准确的表示选中状态
        checkNode() {
            const vm = this
            function travelCol(colList) {
                colList.forEach(col => {
                    const node = vm.$refs['colTree'].getNode(col.key)
                    node.data.visible = node.checked || node.indeterminate
                    if (Array.isArray(col.children) && col.children.length !== 0) {
                        travelCol(col.children)
                    }
                })
            }
            travelCol(this.tableCols)
        }
    }
}

const MyCol = {
    name: 'MyCol',
    props: {
        colOpts: Object
    },
    render(h) {
        function travelTable(col) {
            if (!col.visible) {
                return null
            }
            if (Array.isArray(col.children) && col.children.length !== 0) {
                return h('el-table-column', { props: col }, col.children.map(item => travelTable(item)))
            }
            return h('el-table-column', { props: col })
        }
        return travelTable(this.colOpts)
    }
}

const Main = {
    components: { MyCol, CustCol },
    template: `
        <div>
            <cust-col :table-cols="tableCols"></cust-col>
            <el-table ref="table" :data="tableData">
                <my-col v-for="(item, index) in tableCols" :key="item.key" :col-opts="item"></my-col>
            </el-table>
        </div>
    `,
    data() {
        return {
            tableCols: [
                {
                    key: '0-1',
                    label: '个人信息',
                    visible: true,
                    children: [
                        { label: '姓名', prop: 'name', key: '0-1-1', visible: true },
                        { label: '年龄', prop: 'age', key: '0-1-2', visible: true },
                        { label: '性别', prop: 'sex', key: '0-1-3', visible: true },
                        {
                            key: '0-1-4',
                            label: '联系方式',
                            visible: true,
                            children: [
                                { label: '手机', prop: 'mobile', key: '0-1-4-1', visible: true },
                                { label: '邮箱', prop: 'email', key: '0-1-4-2', visible: true }
                            ]
                        }
                    ]
                },
                {
                    key: '0-2',
                    label: '联系方式',
                    visible: true,
                    children: [
                        { label: '手机', prop: 'mobile', key: '0-2-1', visible: true },
                        { label: '邮箱', prop: 'email', key: '0-2-2', visible: true }
                    ]
                }, { label: '地址', prop: 'addr', key: '0-3', visible: true }
            ],
            tableData: [
                { name: '张三', age: 12, sex: '男', mobile: '18888888888', email: 'zhangsan@gmail.com', addr: 'XXXX' }
            ]
        };
    }
}
const Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>

<div id="app"></div>

@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");