优化采集表格

src/components/collectionForm.vue

@@ -8,7 +8,7 @@
         </div>
         <!-- 全部表格信息 -->
         <div style="overflow: auto;height: 230px;" :style="{ width: widthResize + 'px' }">
-            <vxe-table key="1" :data="SelectFormData" ref="xTableColumn" border class="mytable-scrollbar" height="220" auto-resize style="margin-bottom: 5px;">
+            <vxe-table :data="SelectFormData" ref="xTableColumn" border class="mytable-scrollbar" height="220" auto-resize style="margin-bottom: 5px;" @current-change="currentChangeEvent" highlight-hover-row highlight-current-row>
                 <vxe-column field="" min-width="150">
                     <template #header>
                         <span style="font-size: 13px;">属性名</span>
@@ -69,7 +69,26 @@ export default {
             this.SelectFormData = this.activedAction.formList
         }
     },
-    mounted () { },
+    mounted () {
+        let _this = this
+        document.addEventListener('click', function handleClick (event) {
+            // 如果点击的不是当前高亮的元素，移除高亮
+            if (event.target !== window.currentlyHighlighted) {
+                if (window.currentlyHighlighted) {
+                    window.currentlyHighlighted.style.backgroundColor = '';
+                }
+                window.currentlyHighlighted = null;
+            }
+            if (_this.selectedRow == null) return
+            if (event.target.id == 'addImg' || event.target.id == 'addButton') {
+                _this.setElementBackgroundColor(_this.selectedRow.xpath, '');
+                _this.selectedRow = null;
+                document.removeEventListener('click', handleClick);
+                return;
+                // 移除监听器的代码已经移动到函数开头
+            }
+        });
+    },
     watch: {
         SelectFormData: {
             handler (newVal) {
@@ -93,6 +112,14 @@ export default {
                 !== row._X_ROW_KEY
             )
             _this.SelectFormData = _this.SelectFormData.filter(xpath => xpath.xpath !== row.xpath);
+            // 先将删除的元素清空,并且将背景色还原
+            _this.setElementBackgroundColor(row.xpath, '')
+            // 将表格最后一个选中，添加背景色
+            if (_this.SelectFormData.length > 0) {
+                _this.$refs.xTableColumn.setCurrentRow(_this.SelectFormData[_this.SelectFormData.length - 1])
+                _this.setElementBackgroundColor(_this.SelectFormData[_this.SelectFormData.length - 1].xpath, 'orange')
+            }
+            if (_this.table == null) return
         },
         // 定义事件处理函数
         contextMenuHandler (event) {
@@ -173,8 +200,37 @@ export default {
             info.name = 'ID' + _this.index++
             info.type = ''
             _this.SelectFormData.push(info)
+            // 将新加入的tableData添加高亮
+            _this.$refs.xTableColumn.setCurrentRow(_this.SelectFormData[_this.SelectFormData.length - 1])
+            // 移除先前元素的背景色（如果有）
+            if (window.currentlyHighlighted) {
+                window.currentlyHighlighted.style.backgroundColor = '';
+            }
+            // 更新背景色并保存当前元素
+            event.target.style.backgroundColor = 'orange';
+            window.currentlyHighlighted = event.target;
             console.log(_this.SelectFormData)
         },
+        // 行选中事件
+        currentChangeEvent ({ row }) {
+            if (this.selectedRow == null) {
+                this.selectedRow = row
+            }
+            if (this.selectedRow.xpath !== row.xpath) {
+                this.setElementBackgroundColor(this.selectedRow.xpath, '')
+                this.selectedRow = row
+                this.setElementBackgroundColor(row.xpath, 'orange')
+            } else {
+                this.setElementBackgroundColor(row.xpath, 'orange')
+            }
+        },
+        setElementBackgroundColor (xpath, color) {
+            let result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
+            let selectedElement = result.singleNodeValue;
+            if (selectedElement) {
+                selectedElement.style.backgroundColor = color;
+            }
+        },
         // 获取xpath
         getElementXPath (element) {
             let _this = this
@@ -219,7 +275,7 @@ export default {
 .vxe-table--render-default .vxe-body--column,
 .vxe-table--render-default .vxe-footer--column,
 .vxe-table--render-default .vxe-header--column {
-    line-height: 15px;
+    line-height: 25px;
     text-align: center;
 }
 

src/components/collectionTable.vue

@@ -21,28 +21,34 @@
             <el-button size="mini" style="width: 74px;height: 20px;margin-right: 7px;" @click="getTable" v-if="isSelectTable">获取表格信息</el-button>
         </div>
         <!-- 全部表格信息 -->
-        <div style="overflow: auto;height: 290px;" :style="{ width: widthResize + 'px' }">
-            <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="250" v-if="isSelectTable" auto-resize style="margin-bottom: 5px;" @current-change="currentChangeEvent" highlight-hover-row highlight-current-row>
-                <vxe-column field="" title="列名" min-width="150">
+        <div style="overflow: auto;height: 230px;" :style="{ width: widthResize + 'px' }">
+            <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="220" v-if="isSelectTable" auto-resize style="margin-bottom: 5px;" @current-change="currentChangeEvent" highlight-hover-row highlight-current-row>
+                <vxe-column field="" min-width="150">
+                    <template #header>
+                        <span style="font-size: 13px;">列名</span>
+                    </template>
                     <template v-slot="{ row }">
                         <div style="display: flex;flex-direction: column;">
-                            <!-- <span>选中内容:{{ row.contentText }}</span> -->
                             <vxe-input v-model="row.title" placeholder="请填写列名" size="mini"></vxe-input>
                         </div>
                     </template>
                 </vxe-column>
-                <vxe-column field="" title="属性名" min-width="150">
+                <vxe-column field="" min-width="150">
+                    <template #header>
+                        <span style="font-size: 13px;">属性名</span>
+                    </template>
                     <template v-slot="{ row }">
                         <div style="display: flex;flex-direction: column;">
-                            <!-- <span>选中内容:{{ row.contentText }}</span> -->
                             <vxe-input v-model="row.name" placeholder="请填写属性名" size="mini"></vxe-input>
                         </div>
                     </template>
                 </vxe-column>
-                <vxe-column field="" title="值类型" min-width="170">
+                <vxe-column field="" min-width="170">
+                    <template #header>
+                        <span style="font-size: 13px;">值类型</span>
+                    </template>
                     <template v-slot="{ row }">
                         <div style="display: flex;flex-direction: column;">
-                            <!-- <span>选中内容:{{ row.contentText }}</span> -->
                             <el-select style="height: 28px;" v-model="row.type" placeholder="选择值类型" v-if="row.typeOptions.length > 1" :popper-append-to-body="false" filterable remote>
                                 <el-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.label" :label="num.value"></el-option>
                             </el-select>
@@ -50,11 +56,14 @@
                         </div>
                     </template>
                 </vxe-column>
-                <vxe-column title="操作" min-width="70" fixed="right">
+                <vxe-column min-width="70" fixed="right">
+                    <template #header>
+                        <span style="font-size: 13px;">操作</span>
+                    </template>
                     <template #default="{ row }">
-                        <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>
+                        <!-- <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>
@@ -111,6 +120,7 @@ export default {
                 }
                 window.currentlyHighlighted = null;
             }
+            if (_this.selectedRow == null) return
             if (event.target.id == 'addImg' || event.target.id == 'addButton') {
                 _this.setElementBackgroundColor(_this.selectedRow.xpath, '');
                 _this.selectedRow = null;
@@ -373,8 +383,8 @@ export default {
     },
 }
 </script>
-<style>
-.vxe-select>.vxe-input {
+<style >
+/* .vxe-select>.vxe-input {
     width: 120px !important;
 }
 
@@ -389,6 +399,7 @@ export default {
 .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;
-}
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+} */
 </style>
\ No newline at end of file