权利性质组件完善
Showing
1 changed file
with
38 additions
and
6 deletions
... | @@ -20,6 +20,10 @@ | ... | @@ -20,6 +20,10 @@ |
20 | @click="handleClick(items.id, index, 'minus')" | 20 | @click="handleClick(items.id, index, 'minus')" |
21 | >-</el-button | 21 | >-</el-button |
22 | > | 22 | > |
23 | <div | ||
24 | :class="items.hasNotBorder ? 'itemShow whiteItem' : 'whiteItem'" | ||
25 | v-if="items.isInside" | ||
26 | ></div> | ||
23 | </el-col> | 27 | </el-col> |
24 | <el-col :span="2"> | 28 | <el-col :span="2"> |
25 | <span class="qlxz">权利性质</span> | 29 | <span class="qlxz">权利性质</span> |
... | @@ -180,6 +184,7 @@ export default { | ... | @@ -180,6 +184,7 @@ export default { |
180 | { | 184 | { |
181 | id: Math.random(), | 185 | id: Math.random(), |
182 | isInside: false, | 186 | isInside: false, |
187 | hasNotBorder: false, | ||
183 | qlxz: "", | 188 | qlxz: "", |
184 | pzyt: "", | 189 | pzyt: "", |
185 | sjyt: "", | 190 | sjyt: "", |
... | @@ -198,9 +203,10 @@ export default { | ... | @@ -198,9 +203,10 @@ export default { |
198 | //外层操作 | 203 | //外层操作 |
199 | handleClick(id, ind, type) { | 204 | handleClick(id, ind, type) { |
200 | if (type === "add") { | 205 | if (type === "add") { |
201 | this.countList.splice(ind + 1, 0, { | 206 | this.countList.push({ |
202 | id: Math.random(), | 207 | id: Math.random(), |
203 | isInside: false, | 208 | isInside: false, |
209 | hasNotBorder: false, | ||
204 | qlxz: "", | 210 | qlxz: "", |
205 | pzyt: "", | 211 | pzyt: "", |
206 | sjyt: "", | 212 | sjyt: "", |
... | @@ -219,6 +225,7 @@ export default { | ... | @@ -219,6 +225,7 @@ export default { |
219 | } | 225 | } |
220 | }); | 226 | }); |
221 | } | 227 | } |
228 | this.hasBorderOrNot(); | ||
222 | }, | 229 | }, |
223 | //内层操作 | 230 | //内层操作 |
224 | handleInClick(obj, ind, type) { | 231 | handleInClick(obj, ind, type) { |
... | @@ -227,6 +234,7 @@ export default { | ... | @@ -227,6 +234,7 @@ export default { |
227 | id: obj.id, | 234 | id: obj.id, |
228 | childId: Math.random(), | 235 | childId: Math.random(), |
229 | isInside: true, | 236 | isInside: true, |
237 | hasNotBorder: false, | ||
230 | qlxz: "", | 238 | qlxz: "", |
231 | pzyt: "", | 239 | pzyt: "", |
232 | sjyt: "", | 240 | sjyt: "", |
... | @@ -254,13 +262,25 @@ export default { | ... | @@ -254,13 +262,25 @@ export default { |
254 | tempNum++; | 262 | tempNum++; |
255 | } | 263 | } |
256 | }); | 264 | }); |
257 | this.countList.splice(tempIndex,tempNum) | 265 | this.countList.splice(tempIndex, tempNum); |
258 | } | 266 | } |
259 | } | 267 | } |
268 | this.hasBorderOrNot(); | ||
269 | }, | ||
270 | //判断是否显示边框 | ||
271 | hasBorderOrNot() { | ||
272 | this.countList.forEach((item, index) => { | ||
273 | if (index == this.countList.length - 1) { | ||
274 | item.hasNotBorder = true; | ||
275 | } else { | ||
276 | item.hasNotBorder = item.isInside && !this.countList[index + 1].isInside ? true : false; | ||
277 | } | ||
278 | }); | ||
279 | console.log(this.countList); | ||
280 | }, | ||
281 | getQlxzDataList() { | ||
282 | return this.countList; | ||
260 | }, | 283 | }, |
261 | getQlxzDataList(){ | ||
262 | return this.countList | ||
263 | } | ||
264 | }, | 284 | }, |
265 | }; | 285 | }; |
266 | </script> | 286 | </script> |
... | @@ -274,6 +294,7 @@ export default { | ... | @@ -274,6 +294,7 @@ export default { |
274 | .el-col { | 294 | .el-col { |
275 | height: 100%; | 295 | height: 100%; |
276 | border-right: 1px solid grey; | 296 | border-right: 1px solid grey; |
297 | position: relative; | ||
277 | .qlxz { | 298 | .qlxz { |
278 | line-height: 34px; | 299 | line-height: 34px; |
279 | } | 300 | } |
... | @@ -296,6 +317,17 @@ export default { | ... | @@ -296,6 +317,17 @@ export default { |
296 | border-bottom: none; | 317 | border-bottom: none; |
297 | } | 318 | } |
298 | } | 319 | } |
320 | .whiteItem { | ||
321 | background-color: #fff; | ||
322 | position: absolute; | ||
323 | width: 100%; | ||
324 | height: 2px; | ||
325 | bottom: -1px; | ||
326 | left: 0; | ||
327 | } | ||
328 | .itemShow { | ||
329 | bottom: 2px; | ||
330 | } | ||
299 | } | 331 | } |
300 | .el-col:nth-last-child(2) { | 332 | .el-col:nth-last-child(2) { |
301 | border-right: none; | 333 | border-right: none; |
... | @@ -329,7 +361,7 @@ export default { | ... | @@ -329,7 +361,7 @@ export default { |
329 | margin-left: 0; | 361 | margin-left: 0; |
330 | } | 362 | } |
331 | } | 363 | } |
332 | .qlxzModule:nth-last-child(1) { | 364 | .el-row:nth-last-child(1) { |
333 | border-bottom: none; | 365 | border-bottom: none; |
334 | } | 366 | } |
335 | } | 367 | } | ... | ... |
-
Please register or sign in to post a comment