element关于做筛选时,筛选的是一个数组时遇到的问题

这是一个使用Vue.js编写的商品列表表格组件,包含了数据加载、过滤、分页和单元格样式处理功能。组件中定义了多个方法来处理表格的显示,如去重、过滤和自定义单元格内容。同时,也监听了数据变化并响应页面事件。
摘要由CSDN通过智能技术生成

问题:

<template>
    <div class="goods-list-table-wrapper">
        <GoodsLayout>
            <template v-slot:header-left>
                <button @click="indextest">+++</button>
                <ProjectSelect></ProjectSelect>
            </template>
            <template v-slot:header-right>
                <div class="toolbar">
                    <PresetColumn v-on="presetColumnEvent()"></PresetColumn>
                    <GoodsListPage v-on="pageEvent()" :page="page"></GoodsListPage>
                    <GoBackModuleChoiceBtn></GoBackModuleChoiceBtn>
                </div>
            </template>
            <template v-slot:body-right>
                <div class="goods-list-table">
                    <el-table :data="goodsList" :cell-style="cellStyle" :cell-class-name="cellClassName" :row-key="rowKey" border>
                        <el-table-column type="selection" width="35" align="center" fixed="left"></el-table-column>
                        <el-table-column :filters="filters(column.name,index)" height="50" :filter-multiple="true" :filter-method="index ==3 || index == 5 || index == 7 || index ==22 || index == 24 ?filterTag:undefined"  v-for="(column,index) in tableColumnList" align="center" :prop="column.name" :label="column.displayName" :key="column.name" resizable>
                             <template v-slot="scope">
                                <component :is="createComponent(column)" :cell="scope.row[column.name]"></component>
                             </template>
                        </el-table-column>
                    </el-table>
                </div>
            </template>
        </GoodsLayout>
    </div>
</template>


<script>
import PresetColumn, { PresetColumnEvent } from "@/vsystem/goods-list/goods-list-table/preset-column/component/preset-column.vue";
import { fetchGoodsListTableData, fetchGoodsListUnreadGoodsTaskMessage } from "./goods-list-table.js";
import { isStringWithColor, createComponent,deWeightTableFilters } from "@/vsystem/goods-list/goods-list-table/goods-list-table/config/goods-list-table.js";
import { mapRouteQuery } from "@/utils/router/route-util.js";
import GoodsListPage, { PageEvent } from "@/vsystem/goods-list/goods-list-page/component/goods-list-page.vue";
import GoodsLayout from "@/vsystem/layout/goods-layout/component/goods-layout.vue";
import ProjectSelect from "@/vsystem/project/component/project-select/component/project-select.vue";
import { GoBackModuleChoiceBtn } from "@/vsystem/module-choice/component/go-back-module-choice-btn.js";
import { AdditionalColumn } from "@/vsystem/goods-list/goods-list-table/table-column/config/table-column.js";

export default {
    name: 'goods-list-table',
    components: { GoodsLayout, ProjectSelect, PresetColumn, GoodsListPage, GoBackModuleChoiceBtn, },
    async created() {
        await this.fillTableData({ pageNum: this.page.pageNum });
    },
    computed: {
        ...mapRouteQuery({ projectUuid: 'project', status: 'status' }),
        filterConditionList() {
            const conditionList = [];
            if (this.status) {
                conditionList.push({ columnName: 'status', filterValues: [this.status] });
            }
            return conditionList;
        },
    },
    data() {
        return {
            page: { pageSize: 20, pageNum: 1, totalCount: 0, totalPages: 0 },
            goodsList: [],
            tableColumnList: []
        };
    },
    // 数据监听
    watch:{
        tableColumnList(newvalue,oldvalue){
            console.log('tableColumnList:',newvalue);
        },
        goodsList(newvalue,oldvalue){
            console.log('goodsList:',newvalue);
        }
    },
    methods: {
        createComponent,
        cellClassName({ row, column, rowIndex, columnIndex }) {
            return 'goods-cell';
        },
        cellStyle({ row, column, rowIndex, columnIndex }) {
            const cell = row[column.property];
            if (cell && isStringWithColor(cell)) {
                return { 'background-color': cell.get('color') };
            }
        },
        rowKey(goods) {
            return goods.uuid;
        },
        async fillTableData({ pageNum }) {
            const result = await fetchGoodsListTableData({
                projectUuid: this.projectUuid,
                filterConditions: this.filterConditionList,
                pageNum, pageSize: this.page.pageSize
            });
            if (!result.ok) {
                return this.$message.error(`获取数据失败:${result.networkErrMsg}`);
            }
            this.page = ['pageNum', 'pageSize', 'totalPages', 'totalCount'].reduce((prev, curr) => { prev[curr] = result[curr]; return prev; }, {});
            this.goodsList = result.goodsList;

            this.fillUnreadGoodsTaskMessage();
        },
        async fillUnreadGoodsTaskMessage() {
            const goodsUuidList = this.goodsList.map(goods => goods.uuid);
            const result = await fetchGoodsListUnreadGoodsTaskMessage({ projectUuid: this.projectUuid, goodsUuidList });
            if (!result.ok) {
                this.$message.error(result.networkErrMsg);
            }
            const unreadGroup = result.goodsUnreadGroup;
            for (const goods of this.goodsList) {
                const value = unreadGroup[goods.uuid];
                goods[AdditionalColumn.GoodsTaskMessageUnread.name].set({
                    value: value == undefined ? '--' : value
                });
            }
        },
        pageEvent() {
            return {
                [PageEvent.Prev]: ({ pageNum }) => { this.fillTableData({ pageNum }); },
                [PageEvent.Next]: ({ pageNum }) => { this.fillTableData({ pageNum }); },
                [PageEvent.PageNumChange]: ({ pageNum }) => { this.fillTableData({ pageNum }); }
            };
        },
        presetColumnEvent() {
            return {
                [PresetColumnEvent.Apply]: ({ columnList }) => {
                    this.tableColumnList = columnList;
                }
            };
        },
        // 可选择的项
        filters(itemname,index){
            // 3  5  7  22   24
            if(index == 3 || index == 5 || index == 7 ){
                const Optional = this.goodsList.map((item)=>{
                return {text:item[itemname].value.displayValue ? item[itemname].value.displayValue:'--', value:item[itemname].value.displayValue? item[itemname].value.displayValue: '--'};
         })
        //  console.log(this.deWeight(Optional));

                 return this.deWeight(Optional)
            }else if(index == 22 || index == 24){
                const Optional = this.goodsList.map((item)=>{
                    let a =item[itemname].value.displayValue
                    // console.log(`${a}`);
                return {text:a ?a:'--', value:a? a: '--'}; /* 未加 */
         })
        //  console.log(this.deWeight(Optional));

                 return this.deteleObject(Optional)
            }
        },
        
        // 数组对象去重
        deWeight(arr) {
            for (var i = 0; i < arr.length - 1; i++) {
                for (var j = i + 1; j < arr.length; j++) {
                if (arr[i].text == arr[j].text) {
                    arr.splice(j, 1);
                    j--;
                }
                }
            }
            return arr;
        },
        // 多维数组去重
         deteleObject(obj) {
                var uniques = [];
                var stringify = {};
                for (var i = 0; i < obj.length; i++) {
                    var keys = Object.keys(obj[i]);
                    keys.sort(function (a, b) {
                        return Number(a) - Number(b);
                    });
                    var str = "";
                    for (var j = 0; j < keys.length; j++) {
                        str += JSON.stringify(keys[j]);
                        str += JSON.stringify(obj[i][keys[j]]);
                    }
                    if (!stringify.hasOwnProperty(str)) {
                        uniques.push(obj[i]);
                        stringify[str] = true;
                    }
                }
                uniques = uniques;
                return uniques;
            },

        //返回符合条件的数据
        // 参数分别是:选中的条件 、当前行 、当前列
        filterTag(value, row, column) {
                console.log('选中的:',value);
                const property = column['property'];
                // console.log(`${row[property].value.displayValue}`);
                return row[property].value.displayValue === value;  /* 未加 */
        },
        indextest(){
        
            let dates =[]
            this.tableColumnList.forEach((item,index)=>{
                if(index == 2 || index ==5 || index == 7 || index ==24){
                    dates.push(item.name)
                }
            })
          console.log(dates);
        }
    }
}
</script>

<style lang="less" scoped>
@import "@/vsystem/global/assets/css/global-variable-goods.less";
.goods-list-table-wrapper {
    width: 100%;
    height: calc(100vh - @globalDefaultAccountHeight);
    padding: 10px;

    .toolbar {
        width: 100%;
        height: 100%;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .goods-list-table {
        :deep(.goods-cell) {
            padding: 0px;
            width: 100%;
            height: 100%;
            .cell {
                padding: 0px;
                width: 100%;
                height: 100px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}
</style>

效果:

解决:

<template>
    <div class="goods-list-table-wrapper">
        <GoodsLayout>
            <template v-slot:header-left>
                <button @click="indextest">+++</button>
                <ProjectSelect></ProjectSelect>
            </template>
            <template v-slot:header-right>
                <div class="toolbar">
                    <PresetColumn v-on="presetColumnEvent()"></PresetColumn>
                    <GoodsListPage v-on="pageEvent()" :page="page"></GoodsListPage>
                    <GoBackModuleChoiceBtn></GoBackModuleChoiceBtn>
                </div>
            </template>
            <template v-slot:body-right>
                <div class="goods-list-table">
                    <el-table :data="goodsList" :cell-style="cellStyle" :cell-class-name="cellClassName" :row-key="rowKey" border>
                        <el-table-column type="selection" width="35" align="center" fixed="left"></el-table-column>
                        <el-table-column :filters="filters(column.name,index)" height="50" :filter-multiple="true" :filter-method="index ==3 || index == 5 || index == 7 || index ==22 || index == 24 ?filterTag:undefined"  v-for="(column,index) in tableColumnList" align="center" :prop="column.name" :label="column.displayName" :key="column.name" resizable>
                             <template v-slot="scope">
                                <component :is="createComponent(column)" :cell="scope.row[column.name]"></component>
                             </template>
                        </el-table-column>
                    </el-table>
                </div>
            </template>
        </GoodsLayout>
    </div>
</template>


<script>
import PresetColumn, { PresetColumnEvent } from "@/vsystem/goods-list/goods-list-table/preset-column/component/preset-column.vue";
import { fetchGoodsListTableData, fetchGoodsListUnreadGoodsTaskMessage } from "./goods-list-table.js";
import { isStringWithColor, createComponent,deWeightTableFilters } from "@/vsystem/goods-list/goods-list-table/goods-list-table/config/goods-list-table.js";
import { mapRouteQuery } from "@/utils/router/route-util.js";
import GoodsListPage, { PageEvent } from "@/vsystem/goods-list/goods-list-page/component/goods-list-page.vue";
import GoodsLayout from "@/vsystem/layout/goods-layout/component/goods-layout.vue";
import ProjectSelect from "@/vsystem/project/component/project-select/component/project-select.vue";
import { GoBackModuleChoiceBtn } from "@/vsystem/module-choice/component/go-back-module-choice-btn.js";
import { AdditionalColumn } from "@/vsystem/goods-list/goods-list-table/table-column/config/table-column.js";

export default {
    name: 'goods-list-table',
    components: { GoodsLayout, ProjectSelect, PresetColumn, GoodsListPage, GoBackModuleChoiceBtn, },
    async created() {
        await this.fillTableData({ pageNum: this.page.pageNum });
    },
    computed: {
        ...mapRouteQuery({ projectUuid: 'project', status: 'status' }),
        filterConditionList() {
            const conditionList = [];
            if (this.status) {
                conditionList.push({ columnName: 'status', filterValues: [this.status] });
            }
            return conditionList;
        },
    },
    data() {
        return {
            page: { pageSize: 20, pageNum: 1, totalCount: 0, totalPages: 0 },
            goodsList: [],
            tableColumnList: []
        };
    },
    // 数据监听
    watch:{
        tableColumnList(newvalue,oldvalue){
            console.log('tableColumnList:',newvalue);
        },
        goodsList(newvalue,oldvalue){
            console.log('goodsList:',newvalue);
        }
    },
    methods: {
        createComponent,
        cellClassName({ row, column, rowIndex, columnIndex }) {
            return 'goods-cell';
        },
        cellStyle({ row, column, rowIndex, columnIndex }) {
            const cell = row[column.property];
            if (cell && isStringWithColor(cell)) {
                return { 'background-color': cell.get('color') };
            }
        },
        rowKey(goods) {
            return goods.uuid;
        },
        async fillTableData({ pageNum }) {
            const result = await fetchGoodsListTableData({
                projectUuid: this.projectUuid,
                filterConditions: this.filterConditionList,
                pageNum, pageSize: this.page.pageSize
            });
            if (!result.ok) {
                return this.$message.error(`获取数据失败:${result.networkErrMsg}`);
            }
            this.page = ['pageNum', 'pageSize', 'totalPages', 'totalCount'].reduce((prev, curr) => { prev[curr] = result[curr]; return prev; }, {});
            this.goodsList = result.goodsList;

            this.fillUnreadGoodsTaskMessage();
        },
        async fillUnreadGoodsTaskMessage() {
            const goodsUuidList = this.goodsList.map(goods => goods.uuid);
            const result = await fetchGoodsListUnreadGoodsTaskMessage({ projectUuid: this.projectUuid, goodsUuidList });
            if (!result.ok) {
                this.$message.error(result.networkErrMsg);
            }
            const unreadGroup = result.goodsUnreadGroup;
            for (const goods of this.goodsList) {
                const value = unreadGroup[goods.uuid];
                goods[AdditionalColumn.GoodsTaskMessageUnread.name].set({
                    value: value == undefined ? '--' : value
                });
            }
        },
        pageEvent() {
            return {
                [PageEvent.Prev]: ({ pageNum }) => { this.fillTableData({ pageNum }); },
                [PageEvent.Next]: ({ pageNum }) => { this.fillTableData({ pageNum }); },
                [PageEvent.PageNumChange]: ({ pageNum }) => { this.fillTableData({ pageNum }); }
            };
        },
        presetColumnEvent() {
            return {
                [PresetColumnEvent.Apply]: ({ columnList }) => {
                    this.tableColumnList = columnList;
                }
            };
        },
        // 可选择的项
        filters(itemname,index){
            // 3  5  7  22   24
            if(index == 3 || index == 5 || index == 7 ){
                const Optional = this.goodsList.map((item)=>{
                return {text:item[itemname].value.displayValue ? item[itemname].value.displayValue:'--', value:item[itemname].value.displayValue? item[itemname].value.displayValue: '--'};
         })
        //  console.log(this.deWeight(Optional));

                 return this.deWeight(Optional)
            }else if(index == 22 || index == 24){
                const Optional = this.goodsList.map((item)=>{
                    let a =item[itemname].value.displayValue
                    // console.log(`${a}`);
                return {text:a=='' ?'--': `${a}`, value:a? `${a}`: '--'};
         })
        //  console.log(this.deWeight(Optional));

                 return this.deteleObject(Optional)
            }
        },
        
        // 数组对象去重
        deWeight(arr) {
            for (var i = 0; i < arr.length - 1; i++) {
                for (var j = i + 1; j < arr.length; j++) {
                if (arr[i].text == arr[j].text) {
                    arr.splice(j, 1);
                    j--;
                }
                }
            }
            return arr;
        },
        // 多维数组去重
         deteleObject(obj) {
                var uniques = [];
                var stringify = {};
                for (var i = 0; i < obj.length; i++) {
                    var keys = Object.keys(obj[i]);
                    keys.sort(function (a, b) {
                        return Number(a) - Number(b);
                    });
                    var str = "";
                    for (var j = 0; j < keys.length; j++) {
                        str += JSON.stringify(keys[j]);
                        str += JSON.stringify(obj[i][keys[j]]);
                    }
                    if (!stringify.hasOwnProperty(str)) {
                        uniques.push(obj[i]);
                        stringify[str] = true;
                    }
                }
                uniques = uniques;
                return uniques;
            },

        //返回符合条件的数据
        // 参数分别是:选中的条件 、当前行 、当前列
        filterTag(value, row, column) {
                console.log('选中的:',value);
                const property = column['property'];
                // console.log(`${row[property].value.displayValue}`);
                return `${row[property].value.displayValue}` === value;
        },
        indextest(){
        
            let dates =[]
            this.tableColumnList.forEach((item,index)=>{
                if(index == 2 || index ==5 || index == 7 || index ==24){
                    dates.push(item.name)
                }
            })
          console.log(dates);
        }
    }
}
</script>

<style lang="less" scoped>
@import "@/vsystem/global/assets/css/global-variable-goods.less";
.goods-list-table-wrapper {
    width: 100%;
    height: calc(100vh - @globalDefaultAccountHeight);
    padding: 10px;

    .toolbar {
        width: 100%;
        height: 100%;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .goods-list-table {
        :deep(.goods-cell) {
            padding: 0px;
            width: 100%;
            height: 100%;
            .cell {
                padding: 0px;
                width: 100%;
                height: 100px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}
</style>

效果:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值