动态选择表头的隐藏和显示--elementui的table表格

原因：由于elementui的表格没有做动态渲染表头的操作，自己封装了一个

步骤一：建立vue组件

<template>
    <div class="operate-btn">
        <el-button class="o-ml-12" icon="el-icon-s-operation" v-preventReClick type="success" size="mini" @click="headFilterShow"
            >显示项调整</el-button
        >
        <!-- 筛选穿梭框 -->
        <el-dialog :close-on-click-modal="false" v-dialogDrag :visible.sync="headFilter.visible" title="显示项调整" width="536px">
            <el-form label-position="right" label-width="100px" :model="coefficientAdjustShowForm">
                <el-form-item label="测试字段：">
                    <el-checkbox
                        :indeterminate="coefficientAdjustShowForm.options1IsInde"
                        v-model="coefficientAdjustShowForm.option1CheckAll"
                        @change="option1CheckAllChg"
                        >全选</el-checkbox
                    >
                    <el-checkbox-group @change="options1CheckChg" v-model="coefficientAdjustShowForm.options1">
                        <el-checkbox v-for="item in headerShowList.option1" :label="item" :key="item">{{ item }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="实验字段：">
                    <el-checkbox
                        :indeterminate="coefficientAdjustShowForm.options2IsInde"
                        v-model="coefficientAdjustShowForm.option2CheckAll"
                        @change="option2CheckAllChg"
                        >全选</el-checkbox
                    >
                    <el-checkbox-group @change="options2CheckChg" v-model="coefficientAdjustShowForm.options2">
                        <el-checkbox v-for="item in headerShowList.option2" :label="item" :key="item">{{ item }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-preventReClick @click="headFilter.visible = false">取 消</el-button>
                <el-button v-preventReClick type="primary" @click="handleClickUpdateThead">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'tableHeadAdjust',
    props: ['tableData', 'headerShowList', 'headFilter', 'curThis'],
    data() {
        return {
            coefficientAdjustShowForm: {
                options1: [],
                options2: [],
                option1CheckAll: false,
                option2CheckAll: false,
                options1IsInde: true,
                options2IsInde: true
            }
        };
    },
    methods: {
        // 单选
        options1CheckChg(value) {
            let checkedCount = value.length;
            this.coefficientAdjustShowForm.option1CheckAll = checkedCount === this.headerShowList.option1.length;
            this.coefficientAdjustShowForm.options1IsInde = checkedCount > 0 && checkedCount < this.headerShowList.option1.length;
        },
        options2CheckChg(value) {
            let checkedCount = value.length;
            this.coefficientAdjustShowForm.option2CheckAll = checkedCount === this.headerShowList.option2.length;
            this.coefficientAdjustShowForm.options2IsInde = checkedCount > 0 && checkedCount < this.headerShowList.option2.length;
        },
        // 全选
        option1CheckAllChg(val) {
            this.coefficientAdjustShowForm.options1 = val ? this.headerShowList.option1 : [];
            this.coefficientAdjustShowForm.options1IsInde = false;
        },
        option2CheckAllChg(val) {
            this.coefficientAdjustShowForm.options2 = val ? this.headerShowList.option2 : [];
            this.coefficientAdjustShowForm.options2IsInde = false;
        },
        headFilterShow() {
            this.curThis.headFilter.visible = true;
            // 解决点击CheckBox时候，动态改变了表头的数值
            this.$nextTick(() => {
                this.coefficientAdjustShowForm.options1 = this.curThis.headFilter.value.option1;
                this.coefficientAdjustShowForm.options2 = this.curThis.headFilter.value.option2;
                this.options1CheckChg(this.coefficientAdjustShowForm.options1);
                this.options2CheckChg(this.coefficientAdjustShowForm.options2);
            });
        },
        handleClickUpdateThead() {
            // 当表头数据特别多的时候清空table数据，解决卡顿问题
            // this.curThis.tableData = [];
            // 排序
            let list1 = [];
            let option1 = this.curThis.headerShowList.option1;
            if (option1.length > 0) {
                option1.forEach((item) => {
                    if (this.coefficientAdjustShowForm.options1.length > 0) {
                        this.coefficientAdjustShowForm.options1.forEach((item1) => {
                            if (item == item1) {
                                list1.push(item);
                            }
                        });
                    }
                });
            }
            let list2 = [];
            let option2 = this.curThis.headerShowList.option2;
            if (option2.length > 0) {
                option2.forEach((item) => {
                    if (this.coefficientAdjustShowForm.options2.length > 0) {
                        this.coefficientAdjustShowForm.options2.forEach((item1) => {
                            if (item == item1) {
                                list2.push(item);
                            }
                        });
                    }
                });
            }
            this.curThis.headFilter.value.option1 = list1;
            this.curThis.headFilter.value.option2 = list2;
            // 储存到storage里面
            this.curThis.king_setConceal(this.curThis.$route.path, this.curThis.headFilter.value);
            this.headFilter.visible = false;
            // // 触发改变
            // this.$emit('headFilterShowChg');
        }
    }
};
</script>
<style>
</style>

步骤二：建立vue单页面

<template>
    <div>
        <tableHeadAdjust :tableData="tableData" :headerShowList="headerShowList" :headFilter="headFilter" :curThis="this"></tableHeadAdjust>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180"> </el-table-column>
            <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
            <!-- 方式一：同一级表头 -->
            <!-- <el-table-column v-for="(item, index) in headFilter.value.option1" :key="index + 'option1'" :label="item" :prop="tableHeadeTryList[item]">
            </el-table-column>
            <el-table-column v-for="(item, index) in headFilter.value.option2" :key="index + 'option2'" :label="item" :prop="tableHeadTestList[item]">
            </el-table-column> -->
            <!-- 方式二：父子表头 -->
            <el-table-column v-for="(item, index) in headFilter.value.option1" :key="index + 'option1'" :label="item">
                <el-table-column
                    v-for="(item, index) in headFilter.value.option2"
                    :key="index + 'option2'"
                    :label="item"
                    :prop="tableHeadTestList[item]"
                >
                </el-table-column>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import tableHeadAdjust from '@/components/tableHeadAdjust.vue';
export default {
    name: 'sysIndex',
    components: { tableHeadAdjust },
    data() {
        return {
            tableData: [],
            headFilter: {
                visible: false,
                value: {
                    option1: [],
                    option2: []
                }
            },
            headerShowList: {
                option1: ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6', '测试7'],
                option2: ['实验1', '实验2', '实验3', '实验4', '实验5', '实验6', '实验7']
            }
        };
    },
    computed: {
        tableHeadeTryList() {
            return {
                测试1: 'try1',
                测试2: 'try2',
                测试3: 'try3',
                测试4: 'try4',
                测试5: 'try5',
                测试6: 'try6',
                测试7: 'try7'
            };
        },
        tableHeadTestList() {
            return {
                实验1: 'test1',
                实验2: 'test2',
                实验3: 'test3',
                实验4: 'test4',
                实验5: 'test5',
                实验6: 'test6',
                实验7: 'test7'
            };
        }
    },
    mounted() {
        // userMark为了区分是哪个用户的表头，您可以根据手机号或者id用户的唯一标识来做
        localStorage.setItem('userMark', 'userMark1');
        // 初始化表格表头
        this.king_tableConceal(this);
        this.tableData = [
            {
                date: '2016-05-02',
                name: '王小虎',
                try1: '好的1',
                try2: '好的2',
                try3: '好的3',
                try4: '好的4',
                try5: '好的5',
                try6: '好的6',
                try7: '好的7',
                test1: '没办法1',
                test2: '没办法2',
                test3: '没办法3',
                test4: '没办法4',
                test5: '没办法5',
                test6: '没办法6',
                test7: '没办法7'
            },
            {
                date: '2016-05-04',
                name: '王小虎',
                try1: '好的1',
                try2: '好的2',
                try3: '好的3',
                try4: '好的4',
                try5: '好的5',
                try6: '好的6',
                try7: '好的7',
                test1: '没办法1',
                test2: '没办法2',
                test3: '没办法3',
                test4: '没办法4',
                test5: '没办法5',
                test6: '没办法6',
                test7: '没办法7'
            }
        ];
    },
    methods: {
        /*
        reson:下面这些方法可以放到全局方法里面方便使用
        author:king之浪迹天涯
        */
        /*
         * 初始化表格显示隐藏项
         */
        king_tableConceal(curThis) {
            let headerShowList = curThis.king_getConceal(curThis.$route.path);
            curThis.headFilter.value = headerShowList ? headerShowList : { option1: curThis.headerShowList.option1, option2: curThis.headerShowList.option2 };
        },

        /**
         * 获取用户表格显示隐藏项
         * @param path
         */
        king_getConceal(path) {
            let USER_ID = localStorage.getItem('userMark');
            let USER_TABLEHEADADUST = localStorage.getItem('USER_TABLEHEADADUST');
            USER_TABLEHEADADUST = USER_TABLEHEADADUST ? JSON.parse(USER_TABLEHEADADUST) : {};
            if (USER_TABLEHEADADUST.hasOwnProperty(USER_ID) && USER_TABLEHEADADUST[USER_ID].hasOwnProperty(path))
                return USER_TABLEHEADADUST[USER_ID][path];
            return '';
        },
        /**
         * 存储用户表格显示隐藏项
         * @param path、theader
         */
        king_setConceal(path, conceal) {
            // userMark为了区分是哪个用户的表头，您可以根据手机号或者id用户的唯一标识来做
            let USER_ID = localStorage.getItem('userMark');
            let USER_TABLEHEADADUST = localStorage.getItem('USER_TABLEHEADADUST');
            USER_TABLEHEADADUST = USER_TABLEHEADADUST ? JSON.parse(USER_TABLEHEADADUST) : {};
            if (!USER_TABLEHEADADUST.hasOwnProperty(USER_ID)) {
                USER_TABLEHEADADUST[USER_ID] = {
                    [path]: conceal
                };
            } else {
                USER_TABLEHEADADUST[USER_ID][path] = conceal;
            }
            localStorage.setItem('USER_TABLEHEADADUST', JSON.stringify(USER_TABLEHEADADUST));
        }
    }
};
</script>

<style></style>