el-table仿照excel筛选（自用）

popover.js:

let inBillInfoPop = `
                <el-popover
                        ref = "popover"
                        placement="bottom"
                        width="200"
                        trigger="click">
                    <el-row>
                        <el-col span="8">
                            <el-button size="mini" @click="upClick">升序</el-button>
                        </el-col>
                        <el-col span="8">
                            <el-button size="mini" @click="downClick">降序</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-tabs v-model="activeName">
                            <el-tab-pane label="内容筛选" name="first">
                                <el-input size="mini" v-model="search" @input="searchChange" placeholder="内容筛选"></el-input>
                                <div style="max-height:200px;overflow:auto;">
                                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                                    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                        <el-checkbox style="display: block" v-for="item in newFormDData" :label="item" :key="item">{{item}}</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-row>
                    <el-row style="text-align: right;margin-top: 10px">
                        <el-button size="mini" type="primary" @click="confirmClick">确 认</el-button>
                        <el-button size="mini" @click="cancelClick">取 消</el-button>                    
                    </el-row>
                    <span class="caret-wrapper" slot="reference" @click="setCheckArr"><i class="sort-caret ascending"></i><i class="sort-caret descending"></i></span>
                </el-popover>
`

Vue.component('inBillInfoPop',{
    template:inBillInfoPop,
    props:{
        isInBillInfoPop:{
            type:Boolean,
            default:false
        },
        url:{
            type:String,
            default:''
        },
        formddata:{
            type:Array,
            default:[]
        },
        scope:{
            type:Object,
            default:{}
        },
        allformddata:{
            type:Array,
            default:[]
        },
        pformddata:{
            type:Array,
            default:[]
        },
        selectproperty:{
            type:String,
            default:''
        },
    },
    data(){
        return{
            newFormDData:[],
            search:'',
            formDData:[],
            pformddata:[],
            activeName:'first',
            checkedCities:[],
            checkAll:true,
            isIndeterminate:true,
            // firstSelect:'',
            newArr:[],
            arr:[],
        }
    },
    methods:{
        searchChange(){
            if(this.search){
                this.newFormDData = this.formDData.filter(item => item.includes(this.search))
            }else{
                this.newFormDData = this.formDData
            }
            this.handleCheckAllChange(this.newFormDData)
            this.handleCheckedCitiesChange(this.newFormDData)
        },
        setCheckArr(){
            this.search = ''
            let dataArr = this.formddata
            if(this.scope.column.property == this.selectproperty){
                dataArr = this.pformddata
            }
            this.newArr = dataArr
            // 获取去重后的设备名称数组（如果尚未获取）
            let uniqueDeviceNames = [...new Set(dataArr.map(item => item[this.scope.column.property]))];

// 计算每个设备名称的频率
            let frequency = dataArr.reduce((acc, curr) => {
                acc[curr[this.scope.column.property]] = (acc[curr[this.scope.column.property]] || 0) + 1;
                return acc;
            }, {});
//             if(this.firstSelect == this.scope.column.property){
// // 获取去重后的设备名称数组（如果尚未获取）
//                 uniqueDeviceNames = [...new Set(this.allformddata.map(item => item[this.scope.column.property]))];
//
// // 计算每个设备名称的频率
//                 frequency = this.allformddata.reduce((acc, curr) => {
//                     acc[curr[this.scope.column.property]] = (acc[curr[this.scope.column.property]] || 0) + 1;
//                     return acc;
//                 }, {});
//             }


// 构建新数组字符串，每个项后面加上括号及出现次数
            this.formDData = uniqueDeviceNames.map(deviceName =>
                `${deviceName} (${frequency[deviceName]})`
            );
            // this.newFormDData = this.formDData
            this.newFormDData = this.replaceNullsWithEmptyStrings(this.formDData)
            // 获取去重后的设备名称数组（如果尚未获取）
            const uniqueDeviceNames1 = [...new Set(this.formddata.map(item => item[this.scope.column.property]))];

// 计算每个设备名称的频率
            const frequency1 = this.formddata.reduce((acc, curr) => {
                acc[curr[this.scope.column.property]] = (acc[curr[this.scope.column.property]] || 0) + 1;
                return acc;
            }, {});

// 构建新数组字符串，每个项后面加上括号及出现次数
            this.checkedCities = uniqueDeviceNames1.map(deviceName =>
                `${deviceName} (${frequency1[deviceName]})`
            );
            this.checkedCities = this.replaceNullsWithEmptyStrings(this.checkedCities)
            // this.handleCheckAllChange(this.checkedCities)
            // this.handleCheckedCitiesChange(this.checkedCities)
                // [...new Set(this.formddata.map(item => item[this.scope.column.property]))];
        },
        replaceNullsWithEmptyStrings(arr) {
            return arr.map(item =>
                typeof item === 'string' && /^null\s\((.*)\)$/.test(item) ?
                    `空白 (${RegExp.$1})` :
                    item === null ? `空白 (${RegExp.$1})` :
                        typeof item === 'string' && item.includes('undefined') ? `空白 (${RegExp.$1})` : // 检查字符串是否包含 "undefined"
                            item === undefined ? `空白 (${RegExp.$1})` : // 处理 undefined
                                item
            );
        },
        upClick(){
            this.$emit('upclick')
        },
        downClick(){
            this.$emit('downclick')
        },
        formatDate(val){
            const date = new Date(val);

// 格式化日期，例如获取年月日
            const year = date.getFullYear();
            const month = ("0" + (date.getMonth() + 1)).slice(-2); // getMonth返回0-11，所以需要+1
            const day = ("0" + date.getDate()).slice(-2);

// 输出格式化的日期字符串
            const formattedDate = year+'-'+month+'-'+day;
            return formattedDate;
        },
        confirmClick(){
            // console.log(this.scope.column.property)
            this.$refs.popover.doClose()
            this.arr = this.newArr
            const commonCities = this.checkedCities.filter(city => this.formDData.includes(city));
            this.$emit('confirmclick',this.scope.column.property,commonCities,this.arr)
        },
        cancelClick(){
            this.$refs.popover.doClose()
            // this.$emit('cancelclick')
        },
        handleCheckAllChange(val) {
            this.checkedCities = val ? this.newFormDData : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.newFormDData.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.newFormDData.length;
        },
    }
})



el-table:

<el-table :data="formDData.slice((currentPage-1)*pageSize,currentPage*pageSize)" class="mt10" :header-cell-style="tableStyle" show-summary
          :summary-method="getSummaries">
    </el-table-column>
    <el-table-column prop="realDate" label="日期">
        <template slot="header" slot-scope="scope">
            日期
            <in-bill-info-pop class="inBillInfoPop" @cancelclick="cancelClick(scope)（取消按钮）" @confirmclick="confirmClick（确认按钮）" @upclick="upClick(scope)（上按钮）" @downClick="downClick(scope)（下按钮）" :selectproperty="selectproperty（当前选择节点数据）" :pformddata="pFormDData（上次展开的数据（父节点数据））" :formDData="formDData（当前数据（筛选后））" :allformddata="allFormDData(全部数据)" :scope="scope"></in-bill-info-pop>
        </template>
    </el-table-column>

upClick(value) {
    this.formDData = this.formDData.sort((a, b) => {
        const aValue = a[value.column.property]+'' || '';
        const bValue = b[value.column.property]+'' || '';
        // 如果是升序排列，只需交换a和b的位置
        return aValue.localeCompare(bValue);
    });
    document.querySelectorAll('.inBillInfoPop')[value.$index].__vue__.doClose()
},
downClick(value) {
    this.formDData = this.formDData.sort((a, b) => {
        const aValue = a[value.column.property]+'' || '';
        const bValue = b[value.column.property]+'' || '';
        // 通过传递reverse参数来实现降序排列
        return bValue.localeCompare(aValue);
    });
    document.querySelectorAll('.inBillInfoPop')[value.$index].__vue__.doClose()
},

confirmClick(value1, value2,value3) {
    let arr = [];
    let includesNullString = false; // 新增标志，用于标记arr是否包含字符串'null'

    value2.forEach(item => {
        let cleanedItem = item.replace(/\s*\(.+\)/, '').trim();
        arr.push(cleanedItem);
        if (cleanedItem === '空白') {
            includesNullString = true;
        }
    });
    let filteredArray = value3.filter(item => {
        // 如果arr包含'null'字符串，则允许null值通过过滤
        if (includesNullString) {
            return arr.includes(item[value1]+'') || item[value1] === null;
        } else {
            // 否则，只包含在arr中的非null值
            return arr.includes(item[value1]+'');
        }
    });
    // 根据arr是否包含'null'字符串决定过滤逻辑


    // console.log(filteredArray);
    this.pFormDData = value3
    this.selectproperty = value1;
    this.formDData = filteredArray;
},