采集表界面更改一行展示

src/components/collectionTable.vue

@@ -3,39 +3,55 @@
         <div style="height: 35px;margin-left: 15px;text-align: left;">
             <el-button size="mini" class="button-new-tag" @click="selectElement" v-if="isSelectTable">选择元素</el-button>
             <el-button size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button>
-            <span style="margin-left: 80px;" v-if="isSelectTable">表名:</span> <vxe-input v-if="isSelectTable" v-model="tableName" placeholder="请填写表名" size="mini"></vxe-input>
+            <span style="margin-left: 80px;" v-if="isSelectTable">表名:</span> <vxe-input v-if="isSelectTable"
+                v-model="tableName" placeholder="请填写表名" size="mini"></vxe-input>
         </div>
         <!-- 全部表格信息 -->
         <div style="width: 498px;overflow: auto;">
-            <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="240" v-if="isSelectTable" style="margin-bottom: 5px;">
-                <vxe-column field="" title="列配置">
+            <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="270"
+                v-if="isSelectTable" auto-resize style="margin-bottom: 5px;">
+                <vxe-column field="" title="列名" width="150">
                     <template v-slot="{ row }">
                         <!-- {{ row.text }} -->
-                        <div style="display: flex;"> <span style="width: 68px;">列名:</span> <vxe-input v-model="row.title" placeholder="请填写列名" size="mini"></vxe-input>
+                        <div style="display: flex;"> <span style="width: 68px;"></span> <vxe-input v-model="row.title"
+                                placeholder="请填写列名" size="mini"></vxe-input>
                         </div>
-                        <div style="display: flex;"> <span style="width: 68px;">属性名:</span> <vxe-input v-model="row.name" placeholder="请填写属性名" size="mini"></vxe-input>
+                    </template>
+                </vxe-column>
+                <vxe-column field="" title="属性名" width="150">
+                    <template v-slot="{ row }">
+                        <div style="display: flex;"> <span style="width: 68px;"></span> <vxe-input v-model="row.name"
+                                placeholder="请填写属性名" size="mini"></vxe-input>
                         </div>
+                    </template>
+                </vxe-column>
+                <vxe-column field="" title="值类型" width="150">
+                    <template v-slot="{ row }">
                         <div style="display: flex;"> <span style="width: 68px;line-height: 12px;">
-                                类型:</span> <vxe-select v-model="row.type" placeholder="选择值类型" placement="top" v-if="row.typeOptions.length > 1">
-                                <vxe-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.value" :label="num.label"></vxe-option>
+                            </span> <vxe-select v-model="row.type" placeholder="选择值类型" placement="bottom"
+                                v-if="row.typeOptions.length > 1">
+                                <vxe-option v-for="num in row.typeOptions" :key="num.xpath" :value="num.value"
+                                    :label="num.label"></vxe-option>
                             </vxe-select>
-                            <vxe-input v-model="row.type" :placeholder="row.typeOptions[0].label" size="mini" v-else disabled></vxe-input>
+                            <vxe-input v-model="row.type" :placeholder="row.typeOptions[0].label" size="mini" v-else
+                                disabled></vxe-input>
                         </div>
                     </template>
                 </vxe-column>
-                <vxe-column field="" title="当前选中单元格文本值">
+                <vxe-column field="" title="当前选中文本值" width="150">
                     <template v-slot="{ row }">
                         {{ row.contentText }}
                     </template>
                 </vxe-column>
                 <vxe-column title="操作" width="100">
                     <template #default="{ row }">
-                        <vxe-button status="danger" content="删除" @click="columnDelete(row)" style="margin-right: 20px;width: 50px;"></vxe-button>
+                        <vxe-button status="danger" content="删除" @click="columnDelete(row)"
+                            style="margin-right: 20px;width: 50px;"></vxe-button>
                     </template>
                 </vxe-column>
             </vxe-table>
             <vxe-table :data="tableData" ref="xTable" border class="mytable-scrollbar" height="220"  v-else>
-                <vxe-table-column v-for="(config, index) in tableColumn" :key="index" v-bind="config"></vxe-table-column>
+                <vxe-table-column show-overflow="ellipsis" v-for="(config, index) in tableColumn" :key="index" v-bind="config"></vxe-table-column>
             </vxe-table>
         </div>
         <div style="width: 100%;text-align: right;">
@@ -64,22 +80,22 @@ export default {
             tableName: '',
         }
     },
-    created() {
+    created () {
 
         //  getTableData()
     },
-    mounted() { },
+    mounted () { },
     watch: {},
     computed: {},
     methods: {
-        getTable() {
+        getTable () {
             let _this = this
             _this.table = new table()
             // 验证name属性是否唯一
             _this.validateNames(this.Xpaths)
         },
 
-        columnDelete(row) {
+        columnDelete (row) {
             let _this = this
             _this.SelectTableData = this.SelectTableData.filter(item => item._X_ROW_KEY
                 !== row._X_ROW_KEY
@@ -87,17 +103,17 @@ export default {
             _this.Xpaths = _this.Xpaths.filter(xpath => xpath.xpath !== row.xpath);
             _this.table.cells = _this.table.cells.filter(xpath => xpath !== row.xpath);
         },
-        columnBack() {
+        columnBack () {
             let _this = this
             _this.isSelectTable = true
             _this.tableData = []
         },
 
         // 获取页面元素
-        selectElement() {
+        selectElement () {
             let _this = this
             // 定义事件处理函数
-            function contextMenuHandler(event) {
+            function contextMenuHandler (event) {
                 event.preventDefault(); // 阻止默认的右击菜单
                 _this.contextMenuListenerAdded = true
                 //表格展示配置
@@ -108,7 +124,7 @@ export default {
                 if (targetElement.tagName === 'A') {
                     // 链接
                     info = {
-                        // xPath:'xPath',
+                        xPath:'xPath',
                         url: 'href',
                         text: 'textContent'
                     };
@@ -123,7 +139,7 @@ export default {
                 } else if (targetElement.tagName === 'IMG') {
                     // 图片
                     info = {
-                        // xPath:'xPath',
+                        xPath:'xPath',
                         src: 'src',
                         alt: 'alt'
                     };
@@ -168,7 +184,7 @@ export default {
 
         },
         // 获取xpath
-        getElementXPath(element) {
+        getElementXPath (element) {
             let _this = this
             if (element.tagName === 'BODY') {
                 return '/HTML/' + element.tagName;
@@ -184,7 +200,7 @@ export default {
                 }
             }
         },
-        validateNames(arr) {
+        validateNames (arr) {
             let _this = this;
             let names = new Set();
             // 检查表名是否为空
@@ -237,6 +253,7 @@ export default {
                 let objs = {}
                 objs.field = _this.Xpaths[i].name
                 objs.title = _this.Xpaths[i].title
+                // objs.width = 150
                 _this.tableColumn.push(objs)
 
             }
@@ -244,10 +261,8 @@ export default {
             _this.table.Name = this.actionName
             _this.table.Alias = this.actionType
             _this.$emit('dataChanged', _this.table);
+            console.log(this.tableData)
         }
-
-
-
     },
 }
 </script>
@@ -259,4 +274,7 @@ export default {
 .vxe-input--inner {
     width: 120px !important;
 }
+/* .vxe-table--render-default .vxe-body--column, .vxe-table--render-default .vxe-footer--column, .vxe-table--render-default .vxe-header--column{
+    line-height: 0px!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,title) {
+    this.newCell = function (xpath, name, type, title) {
         _isVerified = false;//加入了
-        let newCell = new cell(xpath,name,type,title);
+        let newCell = new cell(xpath, name, type, title);
         this.cells.push(newCell);
     }
     /**
@@ -102,7 +102,7 @@ function table () {
  * @param {string} type 元素取值类型，文本，链接，元素路径（点击动作用）
  * @param {string} title 标题信息
  */
-function cell (xpath, name , type , title ) {
+function cell (xpath, name, type, title) {
     /**当前单元格的绝对路径，存入Action时有用 */
     this.xpath = xpath;
     /**当前单元格存储数据时的属性名 */
@@ -167,8 +167,14 @@ function cell (xpath, name , type , 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
+            } else {
                 result[this.name] = results.singleNodeValue[this.type];
             }
+
+        }
     };
     return this;//返回当前对象
 }