表格添加选中高亮

src/components/collectionTable.vue

@@ -3,12 +3,13 @@
         <div
             style="display: flex;height: 40px;padding-left: 15px;text-align: left;align-items: center;justify-content: space-between;">
             <template v-if="isSelectTable">
-                <el-tooltip class="item" effect="dark" content="请右击页面元素" placement="top">
+                <el-tooltip class="item" effect="dark" content="点击新增,右击页面元素添加数据" placement="top">
                     <!-- <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag"
                         @click="selectElement">选择元素</el-button> -->
                     <!-- <vxe-button icon="fa fa-plus">新增</vxe-button> -->
-                        <el-button type="primary" size="mini" style="width: 20px;height: 20px;"  @click="selectElement">
-                        <img style="width: 12px;height: 12px;" src="../assets/add.svg">
+                    <el-button type="primary" size="mini" style="width: 40px;height: 20px;" @click="selectElement">
+                        <img style="width: 10px;height: 10px;vertical-align: bottom;" src="../assets/add.svg">
+                        <span>新增</span>
                     </el-button>
                 </el-tooltip>
             </template>
@@ -27,11 +28,12 @@
         <!-- 全部表格信息 -->
         <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;">
+                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">
                     <template v-slot="{ row }">
                         <div style="display: flex;flex-direction: column;">
-                            <span>选中内容:{{ row.contentText }}</span>
+                            <!-- <span>选中内容:{{ row.contentText }}</span> -->
                             <vxe-input v-model="row.title" placeholder="请填写列名" size="mini"></vxe-input>
                         </div>
                     </template>
@@ -39,7 +41,7 @@
                 <vxe-column field="" title="属性名" min-width="150">
                     <template v-slot="{ row }">
                         <div style="display: flex;flex-direction: column;">
-                            <span>选中内容:{{ row.contentText }}</span>
+                            <!-- <span>选中内容:{{ row.contentText }}</span> -->
                             <vxe-input v-model="row.name" placeholder="请填写属性名" size="mini"></vxe-input>
                         </div>
                     </template>
@@ -47,21 +49,23 @@
                 <vxe-column field="" title="值类型" min-width="170">
                     <template v-slot="{ row }">
                         <div style="display: flex;flex-direction: column;">
-                            <span>选中内容:{{ row.contentText }}</span>
+                            <!-- <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.value"
-                                    :label="num.label"></el-option>
+                                <el-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.label"
+                                    :label="num.value"></el-option>
                             </el-select>
                             <vxe-input style="width: 100% !important;" v-model="row.type"
-                                :placeholder="row.typeOptions[0].label" size="mini" v-else disabled></vxe-input>
+                                :placeholder="row.typeOptions[0].value" size="mini" v-else disabled></vxe-input>
                         </div>
                     </template>
                 </vxe-column>
                 <vxe-column title="操作" min-width="70" fixed="right">
                     <template #default="{ row }">
-                        <vxe-button status="danger" content="删除" @click="columnDelete(row)"
-                            style="width: 50px;"></vxe-button>
+                        <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> -->
                     </template>
                 </vxe-column>
             </vxe-table>
@@ -91,6 +95,7 @@ export default {
             contextMenuListenerAdded: false,
             index: 0,
             tableName: '',
+            selectedRow: null
         }
     },
     created () {
@@ -107,7 +112,19 @@ export default {
             this.tableName = this.activedAction.table.name;
         }
     },
-    mounted () { },
+    mounted () {
+        let _this = this
+        document.addEventListener('click', function (event) {
+            // 如果点击的不是当前高亮的元素，移除高亮
+            if (event.target !== window.currentlyHighlighted) {
+                if (window.currentlyHighlighted) {
+                    window.currentlyHighlighted.style.backgroundColor = '';
+                }
+                window.currentlyHighlighted = null;
+
+            }
+        });
+    },
     watch: {},
     computed: {},
     methods: {
@@ -123,7 +140,16 @@ export default {
             _this.SelectTableData = this.SelectTableData.filter(item => item._X_ROW_KEY
                 !== row._X_ROW_KEY
             )
+            // 先将删除的元素清空,并且将背景色还原
             _this.SelectTableData = _this.SelectTableData.filter(xpath => xpath.xpath !== row.xpath);
+            _this.setElementBackgroundColor(row.xpath, '')
+            // 将表格最后一个选中，添加背景色
+            if (_this.SelectTableData.length > 0) {
+                _this.$refs.xTableColumn.setCurrentRow(_this.SelectTableData[_this.SelectTableData.length - 1])
+                _this.setElementBackgroundColor(_this.SelectTableData[_this.SelectTableData.length - 1].xpath, 'orange')
+            }
+
+            if (_this.table == null) return
             _this.table.cells = _this.table.cells.filter(xpath => xpath !== row.xpath);
         },
         columnBack () {
@@ -131,6 +157,21 @@ export default {
             _this.isSelectTable = true
             _this.tableData = []
         },
+        // 行选中事件
+        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')
+            }
+
+
+        },
 
         // 获取页面元素
         selectElement () {
@@ -151,9 +192,9 @@ export default {
                 if (targetElement.tagName === 'A') {
                     // 链接
                     info = {
-                        xPath: 'xPath',
-                        url: 'href',
-                        text: 'textContent'
+                        xPath: '元素路径',
+                        href: '超链接',
+                        textContent: '文本'
                     };
                     typeOptions = Object.entries(info).map(([label, value]) => {
                         return { label, value };
@@ -166,9 +207,9 @@ export default {
                 } else if (targetElement.tagName === 'IMG') {
                     // 图片
                     info = {
-                        xPath: 'xPath',
-                        src: 'src',
-                        alt: 'alt'
+                        "xPath": '元素路径',
+                        src: '超链接',
+                        alt: '属性'
                     };
                     typeOptions = Object.entries(info).map(([label, value]) => {
                         return { label, value };
@@ -181,8 +222,7 @@ export default {
                 } else {
                     // 其他标签
                     info = {
-                        // xPath:'xPath',
-                        text: 'textContent'
+                        textContent: '文本'
                     };
                     typeOptions = Object.entries(info).map(([label, value]) => {
                         return { label, value };
@@ -196,8 +236,16 @@ export default {
                 info.name = 'ID' + _this.index++
                 info.type = ''
                 _this.SelectTableData.push(info)
-                console.log(_this.SelectTableData)
-                // sdkTable--------------------------------------------------------------------------------------------------------
+                // 将新加入的tableData添加高亮
+                _this.$refs.xTableColumn.setCurrentRow(_this.SelectTableData[_this.SelectTableData.length - 1])
+                // 移除先前元素的背景色（如果有）
+                if (window.currentlyHighlighted) {
+                    window.currentlyHighlighted.style.backgroundColor = '';
+                }
+
+                // 更新背景色并保存当前元素
+                event.target.style.backgroundColor = 'orange';
+                window.currentlyHighlighted = event.target;
                 // 移除事件监听器
                 document.removeEventListener('contextmenu', contextMenuHandler);
                 _this.contextMenuListenerAdded = false;
@@ -226,6 +274,13 @@ export default {
                 }
             }
         },
+        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;
+            }
+        },
         validateNames (arr) {
             let _this = this;
             let names = new Set();
@@ -287,10 +342,13 @@ export default {
             _this.table.Name = _this.activedAction.Name
             _this.table.Alias = _this.activedAction.Alias
             _this.$emit('dataChanged', _this.table);
-            console.log(this.table)
             // 防止父级改变，子级未改变重新赋值
-            this.activedAction.table = this.table;
-            this.$emit('dataChanged', this.activedAction);
+            _this.activedAction.table = _this.table;
+            _this.$emit('dataChanged', _this.activedAction);
+            // _this.setElementBackgroundColor('/HTML/BODY/DIV[3]', 'orange')
+        
+            if (_this.selectedRow == null) return
+            _this.setElementBackgroundColor(this.selectedRow.xpath, '')
         }
     },
 }
@@ -304,7 +362,7 @@ export default {
     width: 120px !important;
 }
 
-.el-tooltip__popper.is-dark{
+.el-tooltip__popper.is-dark {
     z-index: 99999 !important;
 }
 </style>
\ No newline at end of file

src/sdk-table.js

@@ -14,9 +14,9 @@ function table () {
      * 新生成一个单元格
      * @param {any} xpath
      */
-    this.newCell = function (xpath, name, type, types,title) {
+    this.newCell = function (xpath, name, type, types, title) {
         _isVerified = false;//加入了
-        let newCell = new cell(xpath, name, type,types, title);
+        let newCell = new cell(xpath, name, type, types, title);
         this.cells.push(newCell);
     }
     /**
@@ -102,7 +102,7 @@ function table () {
  * @param {string} type 元素取值类型，文本，链接，元素路径（点击动作用）
  * @param {string} title 标题信息
  */
-function cell (xpath, name, type,types, title) {
+function cell (xpath, name, type, types, title) {
     /**当前单元格的绝对路径，存入Action时有用 */
     this.xpath = xpath;
     /**当前单元格存储数据时的属性名 */
@@ -167,9 +167,10 @@ function cell (xpath, name, type,types, title) {
         let cellXpath = this.tableXpath + "[" + index + "]" + '/' + this.relativeXpath;
         let results = document.evaluate(cellXpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
         if (!!results.singleNodeValue) {
-            // console.log(results)
             if (this.type == 'xPath') {
-                result[this.name] = this.xpath
+                result[this.name] = xpath
+            } else if (this.type == '文本') {
+                result[this.name] = results.singleNodeValue['textContent'];
             } else {
                 result[this.name] = results.singleNodeValue[this.type];
             }