权利性质组件完善

@@ -20,6 +20,10 @@
 					@click="handleClick(items.id, index, 'minus')"
 					>-</el-button
 				>
+				<div
+					:class="items.hasNotBorder ? 'itemShow whiteItem' : 'whiteItem'"
+					v-if="items.isInside"
+				></div>
 			</el-col>
 			<el-col :span="2">
 				<span class="qlxz">权利性质</span>
@@ -180,6 +184,7 @@ export default {
 				{
 					id: Math.random(),
 					isInside: false,
+					hasNotBorder: false,
 					qlxz: "",
 					pzyt: "",
 					sjyt: "",
@@ -198,9 +203,10 @@ export default {
 		//外层操作
 		handleClick(id, ind, type) {
 			if (type === "add") {
-				this.countList.splice(ind + 1, 0, {
+				this.countList.push({
 					id: Math.random(),
 					isInside: false,
+					hasNotBorder: false,
 					qlxz: "",
 					pzyt: "",
 					sjyt: "",
@@ -219,6 +225,7 @@ export default {
 					}
 				});
 			}
+			this.hasBorderOrNot();
 		},
 		//内层操作
 		handleInClick(obj, ind, type) {
@@ -227,6 +234,7 @@ export default {
 					id: obj.id,
 					childId: Math.random(),
 					isInside: true,
+					hasNotBorder: false,
 					qlxz: "",
 					pzyt: "",
 					sjyt: "",
@@ -254,13 +262,25 @@ export default {
 							tempNum++;
 						}
 					});
-					this.countList.splice(tempIndex,tempNum)
+					this.countList.splice(tempIndex, tempNum);
 				}
 			}
+			this.hasBorderOrNot();
 		},
-		getQlxzDataList(){
-			return this.countList
+		//判断是否显示边框
+		hasBorderOrNot() {
+			this.countList.forEach((item, index) => {
+				if (index == this.countList.length - 1) {
+					item.hasNotBorder = true;
+				} else {
+					item.hasNotBorder = item.isInside && !this.countList[index + 1].isInside ? true : false;
 				}
+			});
+			console.log(this.countList);
+		},
+		getQlxzDataList() {
+			return this.countList;
+		},
 	},
 };
 </script>
@@ -274,6 +294,7 @@ export default {
 		.el-col {
 			height: 100%;
 			border-right: 1px solid grey;
+			position: relative;
 			.qlxz {
 				line-height: 34px;
 			}
@@ -296,6 +317,17 @@ export default {
 					border-bottom: none;
 				}
 			}
+			.whiteItem {
+				background-color: #fff;
+				position: absolute;
+				width: 100%;
+				height: 2px;
+				bottom: -1px;
+				left: 0;
+			}
+			.itemShow {
+				bottom: 2px;
+			}
 		}
 		.el-col:nth-last-child(2) {
 			border-right: none;
@@ -329,7 +361,7 @@ export default {
 			margin-left: 0;
 		}
 	}
-	.qlxzModule:nth-last-child(1) {
+	.el-row:nth-last-child(1) {
 		border-bottom: none;
 	}
 }