二次封装el-table 实现过滤列_el-table过滤

当表格列过多时，实现动态展示列，以下是实现代码：

1.my-filter-column.vue

<template>
    <div>
        <el-dropdown
            trigger="click"
            class="icon"
            :hide-on-click="false"
        >
            <slot class="icon"></slot>
            <!-- <el-icon class="el-icon--right icon"></el-icon> -->
            <!-- <i class="el-icon--right" title="过滤表格列"></i> -->
            <template #dropdown>
                <el-dropdown-menu >
                    <div class="options">
                        <el-button
                            @click="selectAll"
                            title="全部选中"
                        >
                            全选
                        </el-button>
                    </div>
                    <el-dropdown-item
                        v-for="item in Object.values(this.columnList)"
                        :key="item.label"
                    >
                        <el-checkbox
                            :label="item.label"
                            v-model="item.show"
                            @change="handleChange"
                        />
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
 
<script>
import { onMounted, reactive, toRefs } from 'vue-demi'
import { useRouter } from 'vue-router'
export default {
    props: {
        columnList: {
            type: Object,
            default: () => ({})
        }
    },
    name: 'my-filter-column',
    setup(props) { 
        const date = toRefs(props)
        const router = useRouter()
        const state = reactive({
            getColumnList: date.columnList.value
        })
 
        onMounted(() => { 
        })
 
        const handleChange = () => {
            let path = router.currentRoute
            let filterCol = localStorage.filterColumn ? JSON.parse(localStorage.filterColumn) : {}
            filterCol[path] = date.columnList.value
            localStorage.filterColumn = JSON.stringify(filterCol)
        }
 
        const selectAll = () => {
            for (let key in date.columnList.value) {
                if (date.columnList.value[key].show) continue
                date.columnList.value[key].show = true
            }
        }
 
        return{
            ...toRefs(state),
            handleChange,
            selectAll
        }
    },
}
</script>
 
<style scoped lang="scss">
.options{
    margin-top: 5px;
    display: flex;
    justify-content: center;
}
.icon{
    float: right;
    cursor: pointer;
    padding-bottom: 10px;
}
</style>

2.引入my-filter-column.vue

import myFilterColumn from './my-filter-column.vue';

3.注册组件

    components: {
        myFilterColumn,
    }

4.组件的使用

<template>
    <div>
        <my-filter-column
            :column-list="tableColumn"
        >{{filterName}}</my-filter-column>
        <el-table
            :data="data"
            border
            stripe
            :header-cell-style="{textAlign: 'center'}"
            :cell-style="{ textAlign: 'center' }"
            style="width: 100%">
            <template v-for="(item) in col">
                <el-table-column
                    :key="item.prop"
                    v-if="setKey(`${item.label}`, `${item.prop}`)"
                    :prop="item.prop"
                    :label="item.label"
                >
                </el-table-column>
            </template>
        </el-table>
 
    </div>
</template>
<script>
import myFilterColumn from './my-filter-column.vue';
import { reactive, toRefs, computed } from 'vue-demi';
export default {
    components: {
        myFilterColumn,
    },
    name: 'HelloVue3FilterTable',
    props: {
        // 传入的表格数据
        data: {
            type: Array,
            default: [],
            required: true
        },
        // 传入的表格列
        col: { 
            type: Array,
            default: [],
        },
        // 过滤组件名称
        filterName: {
            type: String,
            default: '过滤表格列'
        }
    },
    setup(props) {
        const setKey = computed(() => {
            return (label, key) => {
                // if ( key !== 'options') return state.tableColumn[key] = label
                if (state.tableColumn[key] && 'show' in state.tableColumn[key]) return state.tableColumn[key].show
                state.tableColumn[key] = {
                    label,
                    show: true
                }
                return true
            }
        })
 
        const state = reactive({
            tableColumn: {}
        })
 
        return{
            ...toRefs(state),
            setKey
        }
    }
};
</script>
 
<style lang="scss" scoped>
 
</style>