解决合并冲突

src/App.vue

@@ -35,8 +35,8 @@
                     </div>
                 </div>
                 <div style="width: 10%;margin-right: 15px;display:flex;align-items: center;justify-content: flex-end;">
-                    <el-button :disabled="state" type="primary" size="mini" style="width: 20px;height: 20px;" @click="newAction">
-                        <img style="width: 12px;height: 12px;" src="./assets/add.svg">
+                    <el-button :disabled="state" type="primary" size="mini" style="width: 20px;height: 20px;" @click="newAction" id="addButton">
+                        <img style="width: 12px;height: 12px;" src="./assets/add.svg"  id="addImg"> 
                     </el-button>
                 </div>
             </div>

src/components/collectionTable.vue

@@ -52,9 +52,9 @@
                 </vxe-column>
                 <vxe-column title="操作" min-width="70" fixed="right">
                     <template #default="{ row }">
-                        <img style="width: 50px;height: 28px;vertical-align: bottom;" src="../assets/close.svg" @click="columnDelete(row)">
-                        <!-- <vxe-button status="danger" content="删除" @click="columnDelete(row)"
-                            style="width: 50px;"></vxe-button> -->
+                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
+                            <img style="width: 38px;height: 28px;vertical-align: bottom;cursor: pointer;" src="../assets/close.svg" @click="columnDelete(row)">
+                        </el-tooltip>
                     </template>
                 </vxe-column>
             </vxe-table>
@@ -94,22 +94,29 @@ export default {
                 info.name = this.activedAction.table.cells[i].name;
                 info.title = this.activedAction.table.cells[i].title;
                 info.typeOptions = this.activedAction.table.cells[i].types;
-                info.xPath = this.activedAction.table.cells[i].xpath;
+                info.xpath = this.activedAction.table.cells[i].xpath;
                 this.SelectTableData.push(info)
             }
             this.tableName = this.activedAction.table.name;
         }
+
     },
     mounted () {
         let _this = this
-        document.addEventListener('click', function (event) {
+        document.addEventListener('click', function handleClick (event) {
             // 如果点击的不是当前高亮的元素，移除高亮
             if (event.target !== window.currentlyHighlighted) {
                 if (window.currentlyHighlighted) {
                     window.currentlyHighlighted.style.backgroundColor = '';
                 }
                 window.currentlyHighlighted = null;
-
+            }
+            if (event.target.id == 'addImg' || event.target.id == 'addButton') {
+                _this.setElementBackgroundColor(_this.selectedRow.xpath, '');
+                _this.selectedRow = null;
+                document.removeEventListener('click', handleClick);
+                return;
+                // 移除监听器的代码已经移动到函数开头
             }
         });
     },
@@ -143,6 +150,18 @@ export default {
         columnBack () {
             let _this = this
             _this.isSelectTable = true
+            let tablePath = _this.table.xpath.split('/');
+            tablePath.pop()
+            tablePath = tablePath.join("/")
+            _this.setElementBackgroundColor(tablePath, '')
+            for (let i = 0; i < _this.table.cells.length; i++) {
+                for (let k = 1; k <= _this.tableData.length; k++) {
+                    let path = _this.table.cells[i].tableXpath + '[' + k + ']/' + _this.table.cells[i].relativeXpath
+                    console.log(path)
+                    _this.setElementBackgroundColor(path, '')
+
+                }
+            }
             _this.tableData = []
         },
         // 行选中事件
@@ -333,10 +352,23 @@ export default {
             // 防止父级改变，子级未改变重新赋值
             _this.activedAction.table = _this.table;
             _this.$emit('dataChanged', _this.activedAction);
-            // _this.setElementBackgroundColor('/HTML/BODY/DIV[3]', 'orange')
+            // 选中表格区域
+            let tablePath = _this.table.xpath.split('/');
+            tablePath.pop()
+            tablePath = tablePath.join("/")
+            _this.setElementBackgroundColor(tablePath, 'green')
+            console.log(_this.tableData)
+            console.log(_this.table)
+            for (let i = 0; i < _this.table.cells.length; i++) {
+                for (let k = 1; k <= _this.tableData.length; k++) {
+                    let path = _this.table.cells[i].tableXpath + '[' + k + ']/' + _this.table.cells[i].relativeXpath
+                    console.log(path)
+                    _this.setElementBackgroundColor(path, 'orange')
 
-            if (_this.selectedRow == null) return
-            _this.setElementBackgroundColor(this.selectedRow.xpath, '')
+                }
+            }
+            // if (_this.selectedRow == null) return
+            // _this.setElementBackgroundColor(_this.selectedRow.xpath, '')
         }
     },
 }
@@ -353,4 +385,10 @@ export default {
 .el-tooltip__popper.is-dark {
     z-index: 99999 !important;
 }
+
+.vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
+.vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
+.vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
+    padding: 0 !important;
+}
 </style>
\ No newline at end of file