权利性质组件完善
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