优化界面样式

src/App.vue

@@ -36,7 +36,7 @@
                 </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" id="addButton">
-                        <img style="width: 12px;height: 12px;" src="./assets/add.svg" id="addImg">
+                        <img style="width: 11px;height: 11px;" src="./assets/add.svg" id="addImg">
                     </el-button>
                 </div>
             </div>

src/components/actions.vue

 <template>
   <div class="actions">
-    <el-empty description="正在维护..."></el-empty>
+    <el-empty style="padding: 0;" description="正在维护..."></el-empty>
   </div>
 </template>
 

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 type="primary" size="mini" style="width: 40px;height: 20px;" @click="selectElement"
@@ -13,24 +12,18 @@
                 <!-- <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="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: 10px;" @click="getTable"
-                v-if="isSelectTable">获取表格信息</el-button>
+            <el-button size="mini" style="width: 74px;height: 20px;margin-right: 10px;" @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="130">
-
                     <template #header>
                         <span style="font-size: 13px;">列名</span>
                     </template>
@@ -56,13 +49,10 @@
                     </template>
                     <template v-slot="{ row }">
                         <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 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>
@@ -71,20 +61,17 @@
                         <span style="font-size: 13px;">操作</span>
                     </template>
                     <template #default="{ 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: 38px;height: 28px;vertical-align: bottom;cursor: pointer;margin-bottom: 0px;padding: 0px;border: 0px;" src="../assets/close.svg" @click.stop="columnDelete(row)" v-if="row.xpath !== ''">
                         <template v-else>
                             <el-tooltip class="item" effect="dark" content="点击按钮,右击页面元素添加数据" placement="top">
-                                <img style="width: 24px;height: 24px;vertical-align: bottom;cursor: pointer;background-color: transparent;"
-                                    src="../assets/addTable.svg" @click.stop="selectElement">
+                                <img style="width: 24px;height: 24px;vertical-align: bottom;cursor: pointer;background-color: transparent;margin-bottom: 0px;padding: 0px;border: 0px;" src="../assets/addTable.svg" @click.stop="selectElement">
                             </el-tooltip>
                         </template>
                     </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>
     </div>