00fd6241 by 杨威

权利性质组件完善

1 parent 3f7dfa98
...@@ -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();
260 }, 269 },
261 getQlxzDataList(){ 270 //判断是否显示边框
262 return this.countList 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;
263 } 277 }
278 });
279 console.log(this.countList);
280 },
281 getQlxzDataList() {
282 return this.countList;
283 },
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 }
......