编辑元素多选

src/views/manager/projectinfo/treeTemplate/dynamicExcel.vue

@@ -2,7 +2,7 @@
   <div class="excelHtnl">
     <div class="header" style=" position: absolute;left:10px;top:0">
       <div class="flexStar">
-        <h2>编辑WBS库</h2>
+        <h2>编辑WBS库111</h2>
         <div
           class="GoBack marleft20"
           @click="GoBack()"
@@ -79,7 +79,8 @@ export default {
           prop: 'tab5',
         }
         ]
-      }
+      },
+      checkList:[]
     }
   },
   mounted () {
@@ -212,6 +213,7 @@ export default {
     //excel父节点点击检测
     parentClick(e){
       let target = e.target;
+      const{metaKey,ctrlKey}=e
       //console.log(target)
       let bgs = document.querySelectorAll("#parent .oldlace-bg")
       //console.log(bgs)
@@ -224,6 +226,20 @@ export default {
         if(tdEle){
           //橙色背景
           target.classList.add("oldlace-bg");
+          if(metaKey||ctrlKey){
+            target.classList.add("select-td");
+            this.checkList.push({
+              tr:target.getAttribute('trindex'),
+              td:target.getAttribute('tdindex'),
+            })
+          }else{
+            target.classList.remove("select-td");
+            this.checkList.forEach((ele,index)=>{
+              if(ele.tr===target.getAttribute('trindex')){
+                this.checkList.splice(index,1)
+              }
+            })
+          }
         }
       }
     },
@@ -368,6 +384,11 @@ export default {
   /deep/ .oldlace-bg{
     background-color: oldlace;
   }
+  /deep/ .select-td{
+    border-width: 4px;
+    border-color: #E6A23C;
+    border-style: solid;
+  }
 }
 </style>