el-tree 控制el-table的表头

效果图

template内容

  <el-table ref="table" :data="tableDataList" tooltip-effect="dark" :style="{ width: '98%', margin: '0 auto' }"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column v-for="(item, index) in tableDataHeader" :key="index" :label="item">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="address" show-overflow-tooltip fixed="right" width="55">
                    <template slot="header">
                        <el-popover popper-class="popper_a" placement="top" width="80" trigger="hover" content="列表设置">
                            <i class="el-icon-setting" slot="reference" ref="buttonRef" @click.stop="onclick" />
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>

 <div class="listSettings" v-if="treeShow" ref="divRef">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText" suffix-icon="el-input__icon el-icon-search">
            </el-input>
            <div class="tree-container">
                <el-tree :data="treeData" show-checkbox :default-checked-keys="checkedKeys" default-expand-all node-key="id"
                    :filter-node-method="filterNode" ref="tree" :check-strictly="true" highlight-current
                    :props="defaultProps" :check-on-click-node="true" @check="handleCheck">
                </el-tree>
            </div>
            <div class="tree-foot">
                <el-checkbox v-model="treeSelectAll" @change="handleSelectAll">全选</el-checkbox>
                <el-link type="primary" @click="treeClick">恢复默认</el-link>
            </div>
        </div>

data(){
return {
tableDataList: [],
tableDataHeader: [],
treeShow: false,
filterText: '',
treeData: [
                {
                    id: 1,
                    label: '开票点',
                },
                {
                    id: 2,
                    label: '开票类型',
                    disabled: true,
                },
                {
                    id: 3,
                    label: '发票种类',
                },
                {
                    id: 4,
                    label: '发票请求流水号',
                    disabled: true,
                },
                {
                    id: 5,
                    label: '购买方名称',
                },
                {
                    id: 6,
                    label: '购买方地址申话',
                },
                {
                    id: 7,
                    label: '购买方纳税人识别号',
                },
                {
                    id: 8,
                    label: '销售方名称',
                },
                {
                    id: 9,
                    label: '销售方地址电话',
                },
                {
                    id: 10,
                    label: '制单日期',
                    disabled: true,
                },
                {
                    id: 11,
                    label: '金额',

                },
                {
                    id: 12,
                    label: '税额',
                },
                {
                    id: 13,
                    label: '价税合计',
                    disabled: true,
                },
                {
                    id: 14,
                    label: '备注',
                },
                {
                    id: 15,
                    label: '特定业务',
                },
                {
                    id: 16,
                    label: '项目名称',
                },
                {
                    id: 17,
                    label: '自定义备注',
                },
                {
                    id: 18,
                    label: '状态',
                    disabled: true,
                },
                {
                    id: 19,
                    label: '来源单据号',
                },
                {
                    id: 20,
                    label: '拆分前发票请求流水号',
                },
                {
                    id: 21,
                    label: '开票人',
                },
                {
                    id: 22,
                    label: '发票申请来源',
                },
            ],
   checkedKeys: [2, 4, 5, 10, 11, 12, 13, 18],
 defaultProps: {
                children: 'children',
                label: 'label'
            },
 treeSelectAll: false,//全选

}
},
  watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },

    },
 created() {
        this.$nextTick(() => {
            this.tableDataHeader = this.treeData.filter(item => this.checkedKeys.includes(item.id)).map(item => item.label);
            console.log(this.tableDataHeader, 'tableDataHeader');
        });
    },
 methods:{
 handleOutsideClick(event) { //最外的盒子 点击空白处关闭tree
            const divElement = this.$refs.divRef;
            console.log(divElement && !divElement.contains(event.target));
            if (divElement && !divElement.contains(event.target)) {
                if (this.treeShow == true) {
                    this.treeShow = false
                }
            }
        },
handleCheck(data, checkedData) {
            this.tableDataHeader = this.treeData.filter(item => checkedData.checkedKeys.includes(item.id)).map(item => item.label);
        },
        treeClick() {
            this.treeSelectAll = false
            this.$refs.tree.setCheckedKeys([2, 4, 5, 10, 11, 12, 13, 18]);
            this.checkedKeys = [2, 4, 5, 10, 11, 12, 13, 18]
            this.tableDataHeader = this.treeData.filter(item => this.checkedKeys.includes(item.id)).map(item => item.label);
        },
        handleSelectAll(value) {
            if (value) {
                // 全选
                this.checkedKeys = this.getAllNodeKeys();
            } else {
                // 取消全选
                this.$refs.tree.setCheckedKeys([2, 4, 5, 10, 11, 12, 13, 18]);
                this.checkedKeys = [2, 4, 5, 10, 11, 12, 13, 18]
                this.tableDataHeader = this.treeData.filter(item => this.checkedKeys.includes(item.id)).map(item => item.label);
            }
        },
getAllNodeKeys() {
            // 获取所有节点的 key 值
            const keys = [];
            const label = [];
            this.traverseTree(this.treeData, node => {
                keys.push(node.id);
                label.push(node.label);
            });
            this.tableDataHeader = label
            console.log(this.tableDataHeader, 'this.tableDataHeader');
            return keys;
        },
        traverseTree(nodes, callback) {
            for (const node of nodes) {
                callback(node);
                if (node.children && node.children.length > 0) {
                    this.traverseTree(node.children, callback);
                }
            }
        },
 filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        onclick() {
            this.treeShow = true
        },
 handleSelectionChange(val) {
            this.multipleSelection = val;
        },

}