vue实现筛选功能，文字选中变色

1 <template>
2     <Poptip trigger="hover"title="Title"content="content">
3         <i-button>Hover</i-button>
4     </Poptip>
5     <Poptip trigger="hover"title="Title"content="content">
6         <i-button>Hover</i-button>
7     </Poptip>
8     <Poptip trigger="hover"title="Title"content="content">
9         <i-button>Hover</i-button>
10     </Poptip>
11     <Poptip trigger="hover"title="Title"content="content">
12         <i-button>Hover</i-button>
13     </Poptip>
14     <Poptip title=""content="content">
15         <i-button>筛选</i-button>
16         <div class="api"slot="content">
17             <Tabs :animated="false"v-model="currentTab"@on-click="currentTabChanged">
18                 <tab-pane label="学院"name="xy">
19                     <i-row v-for="item in xyList"@click='showZy(item)'>
20                         <i-col span="12"class="xy":class="{'selectedColor':flag1==item.id}">
21 {{item.label}}
22                         </i-col>
23                     </i-row>
24                 </tab-pane>
25                 <tab-pane label="专业"name="zy"v-if="show2">
26                     <i-row v-for="item in xyList.zy"@click="showList(item)">
27                         <i-col span="12"class="xy":class="{'selectedColor':flag2==item.id}">
28 {{item.label}}
29                         </i-col>
30                     </i-row>
31                 </tab-pane>
32             </Tabs>
33         </div>
34     </Poptip>
35 </template>
36 <script>
37 export default{
38 data() {
39             return{
40 currentTab: 'xy',
41 show2: false,
42 flag1: -1,
43 flag2: -1,
44 xyList: [{
45 value: 'renwen',
46 id: 1,
47 label: '马克思主义学院',
48 zy: [{
49 value: 'xinxi',
50 id: 1,
51 label: '马克思'
52 },
53 {
54 value: 'gongcheng',
55 id: 2,
56 label: '马克思'
57 },
58 {
59 value: 'tongxin',
60 id: 3,
61 label: '马克思'
62 }
63 ]
64 },
65 {
66 value: 'dili',
67 id: 2,
68 label: '地理信息科学技术学院',
69 zy: [{
70 value: 'xinxi',
71 id: 1,
72 label: '地理'
73 },
74 {
75 value: 'gongcheng',
76 id: 2,
77 label: '地理'
78 },
79 {
80 value: 'tongxin',
81 id: 3,
82 label: '地理'
83 }
84 ]
85 },
86 {
87 value: 'sheke',
88 id: 3,
89 label: '社科',
90 zy: [{
91 value: 'xinxi',
92 id: 1,
93 label: '社科'
94 },
95 {
96 value: 'gongcheng',
97 id: 2,
98 label: '社科'
99 },
100 {
101 value: 'tongxin',
102 id: 3,
103 label: '社科'
104 }
105 ]
106 },
107 {
108 value: 'renwen',
109 id: 4,
110 label: '人文',
111 zy: [{
112 value: 'xinxi',
113 id: 1,
114 label: '人文'
115 },
116 {
117 value: 'gongcheng',
118 id: 2,
119 label: '人文'
120 },
121 {
122 value: 'tongxin',
123 id: 3,
124 label: '人文'
125 }
126 ]
127 },
128 {
129 value: 'dili',
130 id: 5,
131 label: '地理',
132 zy: [{
133 value: 'xinxi',
134 id: 1,
135 label: '地理'
136 },
137 {
138 value: 'gongcheng',
139 id: 2,
140 label: '地理'
141 },
142 {
143 value: 'tongxin',
144 id: 3,
145 label: '地理'
146 }
147 ]
148 },
149 {
150 value: 'sheke',
151 id: 6,
152 label: '社科',
153 zy: [{
154 value: 'xinxi',
155 id: 1,
156 label: '社科'
157 },
158 {
159 value: 'gongcheng',
160 id: 2,
161 label: '社科'
162 },
163 {
164 value: 'tongxin',
165 id: 3,
166 label: '社科'
167 }
168 ]
169 }
170 ]
171 }
172 },
173 methods: {
174 currentTabChanged(name) {
175                 if(this.currentTab == 'xy'){
176                     //this.show2 = false
177 }
178 },
179 showZy(item) {
180                 if(item.label) {
181                     this.flag1 =item.id
182                     this.xyList.zy =item.zy
183                     this.show2 = true
184                     this.currentTab = 'zy'
185                     //console.log(this.xyList.zy)
186 }
187 },
188 showList(item) {
189                 if(item.label) {
190                     this.flag2 =item.id
191                     //console.log(item.label)
192 }
193 }
194 }
195 }
196 </script>
197 
198 <style>
199 span {
200 padding:10px;
201 cursor:pointer;
202     }
203 
204 .xy {
205 cursor:pointer;
206 padding:5px;
207 box-sizing:border-box;
208     }
209 
210 .selectedColor {
211 color:#2d8cf0;
212     }
213 </style>