详见代码片段，或者下面的源代码，不知为何复制过来没缩进，搞缩进又太麻烦了，屌大的各位可以复制到IDE里再格式化以下方便查看，先谢谢大家了 以下为源代码 wxs部分： [代码]Page({[代码][代码]    [代码][代码]data: {[代码][代码]        [代码][代码]do_not_care_me:[代码][代码]'这里有一个问题，理论上切换标签筛选数据时是从all数组中抽出来几个再进行处理，不可能会影响到all变量中的数据的，然而在这里却造成了影响，不知为何，麻烦屌大的各位看看'[代码][代码],[代码][代码]        [代码][代码]//全部的基础数据，本来是从服务器获取的，这里将数据简化并作为初始变量[代码][代码]        [代码][代码]all: [{[代码][代码]            [代码][代码]serial: [代码][代码]'201905080001'[代码][代码],[代码][代码]            [代码][代码]state: [代码][代码]'finished'[代码][代码],[代码][代码]            [代码][代码]type: [代码][代码]'0001'[代码][代码],[代码][代码]            [代码][代码]time: [代码][代码]'10:00:00'[代码][代码]        [代码][代码]}, {[代码][代码]            [代码][代码]serial: [代码][代码]'201905080002'[代码][代码],[代码][代码]            [代码][代码]state: [代码][代码]'working'[代码][代码],[代码][代码]            [代码][代码]type: [代码][代码]'0003'[代码][代码],[代码][代码]            [代码][代码]time: [代码][代码]'11:00:00'[代码][代码]        [代码][代码]}, {[代码][代码]            [代码][代码]serial: [代码][代码]'201905080003'[代码][代码],[代码][代码]            [代码][代码]state: [代码][代码]'failed'[代码][代码],[代码][代码]            [代码][代码]type: [代码][代码]'0002'[代码][代码],[代码][代码]            [代码][代码]time: [代码][代码]'12:00:00'[代码][代码]        [代码][代码]}, {[代码][代码]            [代码][代码]serial: [代码][代码]'201905080004'[代码][代码],[代码][代码]            [代码][代码]state: [代码][代码]'canceled'[代码][代码],[代码][代码]            [代码][代码]type: [代码][代码]'0003'[代码][代码],[代码][代码]            [代码][代码]time: [代码][代码]'13:00:00'[代码][代码]        [代码][代码]}, {[代码][代码]            [代码][代码]serial: [代码][代码]'201905080005'[代码][代码],[代码][代码]            [代码][代码]state: [代码][代码]'finished'[代码][代码],[代码][代码]            [代码][代码]type: [代码][代码]'0002'[代码][代码],[代码][代码]            [代码][代码]time: [代码][代码]'14:00:00'[代码][代码]        [代码][代码]}],[代码][代码]        [代码][代码]//要展示的数据，这里只是保存到这个变量中[代码][代码]        [代码][代码]show: [代码][代码]null[代码][代码],[代码][代码]        [代码][代码]//当前选中的标签，默认值是全部[代码][代码]        [代码][代码]select: [代码][代码]'all'[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]onLoad() {[代码][代码]        [代码][代码]// 由于一开始就将数据展示就会导致all变量发生改变，这里先将其注释[代码][代码]        [代码][代码]// this.show(this.data.all)[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]select(e) {[代码][代码]        [代码][代码]//这块仅仅是为了更改上面的标签颜色[代码][代码]        [代码][代码]let select = e.target.id[代码][代码]        [代码][代码]this[代码][代码].setData({[代码][代码]            [代码][代码]select: select[代码][代码]        [代码][代码]})[代码][代码]        [代码][代码]//下面是筛选要展示的数据[代码][代码]        [代码][代码]let show_list = [][代码][代码]        [代码][代码]let all = [代码][代码]this[代码][代码].data.all[代码][代码]        [代码][代码]for[代码] [代码](let key [代码][代码]in[代码] [代码]all) {[代码][代码]            [代码][代码]if[代码] [代码](all[key].state == select || select == [代码][代码]'all'[代码][代码]) {[代码][代码]                [代码][代码]//将满足条件的数据添加到这个数组中，用于后续修改[代码][代码]                [代码][代码]//方法1[代码][代码]                [代码][代码]// show_list.push(all[key])[代码][代码]                [代码][代码]//方法2[代码][代码]                [代码][代码]let temp = all[key][代码][代码]                [代码][代码]show_list.push(temp)[代码][代码]            [代码][代码]}[代码][代码]        [代码][代码]}[代码][代码]        [代码][代码]//将筛选好的数据通过show函数处理[代码][代码]        [代码][代码]this[代码][代码].show(show_list)[代码][代码]    [代码][代码]},[代码] [代码]    [代码][代码]show(show_list) {[代码][代码]        [代码][代码]//将要展示的基础数据进行加工一下，使原始数据能够用于展示[代码][代码]        [代码][代码]for[代码] [代码](let i = 0; i < show_list.length; i++) {[代码][代码]            [代码][代码]switch[代码] [代码](show_list[i].state) {[代码][代码]                [代码][代码]case[代码] [代码]'waiting'[代码][代码]:[代码][代码]                    [代码][代码]show_list[i][[代码][代码]'state'[代码][代码]] = [代码][代码]'等待中...'[代码][代码]                    [代码][代码]show_list[i][[代码][代码]'icon_type'[代码][代码]] = [代码][代码]'waiting'[代码][代码]                    [代码][代码]show_list[i][[代码][代码]'icon_color'[代码][代码]] = [代码][代码]''[代码][代码]                    [代码][代码]break[代码][代码]                [代码][代码]case[代码] [代码]'working'[代码][代码]:[代码][代码]                    [代码][代码]show_list[i][[代码][代码]'state'[代码][代码]] = [代码][代码]'跑步中...'[代码][代码]                    [代码][代码]show_list[i][[代码][代码]'icon_type'[代码][代码]] = [代码][代码]'waiting'[代码][代码]                    [代码][代码]show_list[i][[代码][代码]'icon_color'[代码][代码]] = [代码][代码]'rgb(10,186,7)'[代码][代码]                    [代码][代码]break[代码][代码]                [代码][代码]case[代码] [代码]'finished'[代码][代码]:[代码][代码]                    [代码][代码]show_list[i][[代码][代码]'state'[代码][代码]] = [代码][代码]'已完成'[代码][代码]                    [代码][代码]show_list[i][[代码][代码]'icon_type'[代码][代码]] = [代码][代码]'success'[代码][代码]                    [代码][代码]show_list[i][[代码][代码]'icon_color'[代码][代码]] = [代码][代码]''[代码][代码]                    [代码][代码]break[代码][代码]                [代码][代码]case[代码] [代码]'canceled'[代码][代码]:[代码][代码]                    [代码][代码]show_list[i][[代码][代码]'state'[代码][代码]] = [代码][代码]'已取消'[代码][代码]                    [代码][代码]show_list[i][[代码][代码]'icon_type'[代码][代码]] = [代码][代码]'clear'[代码][代码]                    [代码][代码]show_list[i][[代码][代码]'icon_color'[代码][代码]] = [代码][代码]'orange'[代码][代码]                    [代码][代码]break[代码][代码]                [代码][代码]case[代码] [代码]'failed'[代码][代码]:[代码][代码]                    [代码][代码]show_list[i][[代码][代码]'state'[代码][代码]] = [代码][代码]'失败'[代码][代码]                    [代码][代码]show_list[i][[代码][代码]'icon_type'[代码][代码]] = [代码][代码]'warn'[代码][代码]                    [代码][代码]show_list[i][[代码][代码]'icon_color'[代码][代码]] = [代码][代码]''[代码][代码]                    [代码][代码]break[代码][代码]            [代码][代码]}[代码][代码]        [代码][代码]}[代码][代码]        [代码][代码]//将处理好的数据同步到视图层[代码][代码]        [代码][代码]this[代码][代码].setData({[代码][代码]            [代码][代码]show: show_list[代码][代码]        [代码][代码]})[代码][代码]    [代码][代码]},[代码][代码]})[代码]wxs部分： [代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'select'[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'{{select=="all"?"selected":"unselected"}}'[代码] [代码]bindtap[代码][代码]=[代码][代码]'select'[代码] [代码]id[代码][代码]=[代码][代码]'all'[代码][代码]>全部</[代码][代码]view[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'{{select=="finished"?"selected":"unselected"}}'[代码] [代码]bindtap[代码][代码]=[代码][代码]'select'[代码] [代码]id[代码][代码]=[代码][代码]'finished'[代码][代码]>已完成</[代码][代码]view[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'{{select=="canceled"?"selected":"unselected"}}'[代码] [代码]bindtap[代码][代码]=[代码][代码]'select'[代码] [代码]id[代码][代码]=[代码][代码]'canceled'[代码][代码]>已取消</[代码][代码]view[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]'{{select=="failed"?"selected":"unselected"}}'[代码] [代码]bindtap[代码][代码]=[代码][代码]'select'[代码] [代码]id[代码][代码]=[代码][代码]'failed'[代码][代码]>失败</[代码][代码]view[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]<[代码][代码]view[代码][代码]>下面就是简单的展示一下</[代码][代码]view[代码][代码]>[代码][代码]<[代码][代码]view[代码] [代码]wx:for[代码][代码]=[代码][代码]'{{show}}'[代码][代码]>{{item.serial}}</[代码][代码]view[代码][代码]>[代码][代码]<[代码][代码]view[代码][代码]>{{do_not_care_me}}</[代码][代码]view[代码][代码]>[代码]wxss部分： [代码].select {[代码][代码]    [代码][代码]height[代码][代码]: [代码][代码]45px[代码][代码];[代码][代码]    [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]    [代码][代码]display[代码][代码]: flex;[代码][代码]    [代码][代码]flex-[代码][代码]direction[代码][代码]: row;[代码][代码]    [代码][代码]justify-[代码][代码]content[代码][代码]: flex-start;[代码][代码]    [代码][代码]align-items: [代码][代码]center[代码][代码];[代码][代码]    [代码][代码]overflow[代码][代码]: [代码][代码]scroll[代码][代码];[代码][代码]    [代码][代码]border-bottom[代码][代码]: [代码][代码]1px[代码] [代码]solid[代码] [代码]#ddd[代码][代码];[代码][代码]}[代码] [代码].unselected {[代码][代码]    [代码][代码]margin[代码][代码]: [代码][代码]0[代码][代码];[代码][代码]    [代码][代码]font-size[代码][代码]: [代码][代码]13px[代码][代码];[代码][代码]    [代码][代码]line-height[代码][代码]: [代码][代码]26px[代码][代码];[代码][代码]    [代码][代码]height[代码][代码]: [代码][代码]26px[代码][代码];[代码][代码]    [代码][代码]width[代码][代码]: [代码][代码]70px[代码][代码];[代码][代码]    [代码][代码]border[代码][代码]: [代码][代码]1px[代码] [代码]solid[代码] [代码]#ddd[代码][代码];[代码][代码]    [代码][代码]border-radius: [代码][代码]14px[代码][代码];[代码][代码]    [代码][代码]margin-left[代码][代码]: [代码][代码]14px[代码][代码];[代码][代码]    [代码][代码]text-align[代码][代码]: [代码][代码]center[代码][代码];[代码][代码]    [代码][代码]flex-shrink: [代码][代码]0[代码][代码];[代码][代码]}[代码] [代码].selected {[代码][代码]    [代码][代码]margin[代码][代码]: [代码][代码]0[代码][代码];[代码][代码]    [代码][代码]font-size[代码][代码]: [代码][代码]13px[代码][代码];[代码][代码]    [代码][代码]line-height[代码][代码]: [代码][代码]28px[代码][代码];[代码][代码]    [代码][代码]height[代码][代码]: [代码][代码]28px[代码][代码];[代码][代码]    [代码][代码]width[代码][代码]: [代码][代码]72px[代码][代码];[代码][代码]    [代码][代码]border-radius: [代码][代码]14px[代码][代码];[代码][代码]    [代码][代码]margin-left[代码][代码]: [代码][代码]14px[代码][代码];[代码][代码]    [代码][代码]text-align[代码][代码]: [代码][代码]center[代码][代码];[代码][代码]    [代码][代码]flex-shrink: [代码][代码]0[代码][代码];[代码][代码]    [代码][代码]background-color[代码][代码]: [代码][代码]#33b9e6[代码][代码];[代码][代码]    [代码][代码]border[代码][代码]: [代码][代码]0px[代码][代码];[代码][代码]    [代码][代码]color[代码][代码]: [代码][代码]white[代码][代码];[代码][代码]}[代码]