表格优化

src/assets/addTable.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1701180749214" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M514.972672 25.220096c-261.41696 0-473.339904 211.922944-473.339904 473.339904 0 261.424128 211.922944 473.344 473.339904 473.344 261.419008 0 473.34912-211.919872 473.34912-473.344C988.321792 237.14304 776.39168 25.220096 514.972672 25.220096zM810.990592 516.393984l-277.533696 0.64-0.584704 278.121472c-0.039936 10.202112-8.31488 18.477056-18.516992 18.477056l-0.039936 0c-10.202112-0.039936-18.477056-8.31488-18.477056-18.556928l0.582656-277.955584-277.376 0.64-0.039936 0c-10.202112 0-18.477056-8.274944-18.516992-18.477056 0-10.202112 8.233984-18.516992 18.477056-18.556928l277.533696-0.64 0.584704-278.121472c0.039936-10.202112 8.31488-18.477056 18.516992-18.477056l0.039936 0c10.202112 0.039936 18.477056 8.31488 18.477056 18.556928L533.53472 480l277.376-0.64 0.039936 0c10.202112 0 18.477056 8.274944 18.516992 18.477056C829.467648 508.039168 821.233664 516.353024 810.990592 516.393984z" fill="#FF9000" p-id="4231"></path></svg>
\ No newline at end of file

src/components/collectionTable.vue

 <template>
     <div class="collectionTable">
-        <div style="display: flex;height: 25px;padding-left: 15px;text-align: left;align-items: center;justify-content: space-between;">
+        <div
+            style="display: flex;height: 25px;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-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: 40px;height: 20px;" @click="selectElement" v-if="!selectTable">
+                <!-- <el-tooltip class="item" effect="dark" content="点击新增,右击页面元素添加数据" placement="top">
+                    <el-button type="primary" size="mini" style="width: 40px;height: 20px;" @click="selectElement"
+                        v-if="!selectTable">
                         <img style="width: 10px;height: 10px;vertical-align: bottom;" src="../assets/add.svg">
                         <span>新增</span>
                     </el-button>
-                </el-tooltip>
-                <el-button style="width: 50px;height: 20px;" size="small" class="button-new-tag" @click="cancelSelect" v-if="selectTable">取消选择</el-button>
+                </el-tooltip> -->
+                <!-- <el-button style="width: 50px;height: 20px;" size="small" class="button-new-tag" @click="cancelSelect"
+                    v-if="selectTable">取消选择</el-button> -->
             </template>
-            <el-button style="width: 50px;height: 20px;" size="mini" class="button-new-tag" @click="columnBack" v-else>返回</el-button>
+            <el-button style="width: 50px;height: 20px;" size="mini" class="button-new-tag" @click="columnBack"
+                v-else>返回</el-button>
             <div style="display: flex;align-items: center;">
                 <span style="margin-left: 45px;font-size: 13px;" v-if="isSelectTable">表名:</span>
-                <vxe-input style="margin-left: 10px;" v-if="isSelectTable" v-model="tableName" placeholder="请填写表名" size="mini"></vxe-input>
+                <vxe-input style="margin-left: 10px;" v-if="isSelectTable" v-model="tableName" placeholder="请填写表名"
+                    size="mini"></vxe-input>
             </div>
             <!-- <el-button style="padding-right: 15px;" size="small" class="button-new-tag" @click="getTable" v-if="isSelectTable">获取表格信息</el-button> -->
-            <el-button size="mini" style="width: 74px;height: 20px;margin-right: 7px;" @click="getTable" v-if="isSelectTable">获取表格信息</el-button>
+            <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: 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-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="170">
                     <template #header>
                         <span style="font-size: 13px;">列名</span>
                     </template>
                     <template v-slot="{ row }">
-                        <div style="display: flex;flex-direction: column;">
+                        <div style="display: flex;flex-direction: column;" v-if="row.xpath !== ''">
                             <vxe-input v-model="row.title" placeholder="请填写列名" size="mini"></vxe-input>
                         </div>
                     </template>
@@ -39,7 +44,7 @@
                         <span style="font-size: 13px;">属性名</span>
                     </template>
                     <template v-slot="{ row }">
-                        <div style="display: flex;flex-direction: column;">
+                        <div style="display: flex;flex-direction: column;" v-if="row.xpath !== ''">
                             <vxe-input v-model="row.name" placeholder="请填写属性名" size="mini"></vxe-input>
                         </div>
                     </template>
@@ -49,11 +54,14 @@
                         <span style="font-size: 13px;">值类型</span>
                     </template>
                     <template v-slot="{ row }">
-                        <div style="display: flex;flex-direction: column;">
-                            <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>
+                        <div style="display: flex;flex-direction: column;" v-if="row.xpath !== ''">
+                            <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>
-                            <vxe-input style="width: 100% !important;" v-model="row.type" :placeholder="row.typeOptions[0].value" size="mini" v-else disabled></vxe-input>
+                            <vxe-input style="width: 100% !important;" v-model="row.type"
+                                :placeholder="row.typeOptions[0].value" size="mini" v-else disabled></vxe-input>
                         </div>
                     </template>
                 </vxe-column>
@@ -63,13 +71,17 @@
                     </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)">
+                        <img style="width: 38px;height: 28px;vertical-align: bottom;cursor: pointer;"
+                            src="../assets/close.svg" @click.stop="columnDelete(row)" v-if="row.xpath !== ''">
+                        <img style="width: 37px;height: 24px;vertical-align: bottom;cursor: pointer;"
+                            src="../assets/addTable.svg" @click.stop="selectElement" v-else>
                         <!-- </el-tooltip> -->
                     </template>
                 </vxe-column>
             </vxe-table>
             <vxe-table :data="tableData" ref="xTable" border class="mytable-scrollbar" height="220" v-else>
-                <vxe-table-column show-overflow="ellipsis" 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>
 
@@ -109,8 +121,25 @@ export default {
                 this.SelectTableData.push(info)
             }
             this.tableName = this.activedAction.table.name;
+            let obj = {}
+            obj.name = ''
+            obj.type = ''
+            obj.typeOptions = [
+                { value: 'text', label: '文本' },
+            ]
+            obj.xpath = ''
+            this.SelectTableData.push(obj)
+        }
+        if (this.SelectTableData.length == 0) {
+            let obj = {}
+            obj.name = ''
+            obj.type = ''
+            obj.typeOptions = [
+                { value: 'text', label: '文本' },
+            ]
+            obj.xpath = ''
+            this.SelectTableData.push(obj)
         }
-
     },
     mounted () {
         let _this = this
@@ -139,7 +168,10 @@ export default {
             let _this = this
             _this.table = new table()
             // 验证name属性是否唯一
-            _this.validateNames(this.SelectTableData)
+            let data = [...this.SelectTableData]
+            data = data.filter(item => item.xpath);
+            // console.log(data)
+            _this.validateNames(data)
         },
 
         columnDelete (row) {
@@ -251,9 +283,13 @@ export default {
             }
             info.name = 'ID' + _this.index++
             info.type = ''
-            _this.SelectTableData.push(info)
+            _this.SelectTableData.unshift(info)
             // 将新加入的tableData添加高亮
-            _this.$refs.xTableColumn.setCurrentRow(_this.SelectTableData[_this.SelectTableData.length - 1])
+            // console.log(this.$refs.xTableColumn)
+            if (this.$refs.xTableColumn !== undefined) {
+                this.$refs.xTableColumn.setCurrentRow(_this.SelectTableData[_this.SelectTableData.length - 1])
+            }
+
             // 移除先前元素的背景色（如果有）
             if (window.currentlyHighlighted) {
                 window.currentlyHighlighted.style.backgroundColor = '';
@@ -341,7 +377,7 @@ export default {
                 names.add(item.name);
             }
             // 遍历 SelectTableData
-            for (let i = 0; i < _this.SelectTableData.length; i++) {
+            for (let i = 0; i < _this.SelectTableData.length - 1; i++) {
                 // _this.SelectTableData[i].name = 'ID' + i
                 _this.table.newCell(_this.SelectTableData[i].xpath, _this.SelectTableData[i].name, _this.SelectTableData[i].type, _this.SelectTableData[i].typeOptions, _this.SelectTableData[i].title)
             }
@@ -353,7 +389,7 @@ export default {
             // 检查数据是否为空
             if (_this.tableData.length == 0) return
             // 遍历 SelectTableData
-            for (let i = 0; i < _this.SelectTableData.length; i++) {
+            for (let i = 0; i < _this.SelectTableData.length - 1; i++) {
                 let objs = {}
                 objs.field = _this.SelectTableData[i].name
                 objs.title = _this.SelectTableData[i].title