优化表格界面

src/App.vue

@@ -95,7 +95,7 @@
                 <div style="margin-left: 15px;margin-top: 10px;" v-if="actionType == 'actions'">
                     <el-button @click="toActions">进入容器</el-button>
                 </div>
-                <component style="height: 345px;" :is="dynamicComponent" :actionName="actionName" :actionType="actionType" @dataChanged="handleDataChange" :dynamicTagObj="dynamicTagObj" v-if="actionType !== ''"></component>
+                <component style="height: 345px;width: 460px;" :is="dynamicComponent" :actionName="actionName" :actionType="actionType" @dataChanged="handleDataChange" :dynamicTagObj="dynamicTagObj" v-if="actionType !== ''"></component>
             </div>
         </div>
     </div>
@@ -105,10 +105,10 @@
 // 导出json文件使用的库
 import { saveAs } from 'file-saver';
 import draggable from 'vuedraggable'
-import { pageNavigate, elClick, sysSleep, elOutput, loopClick, onInput, pageJavascript, collectSingleElements, pageClose, mouseMove, collectionTable, submit, actions } from './components/index.js'
+import { pageNavigate, elClick, sysSleep, elOutput, loopClick, elInput, pageJavascript, collectSingleElements, pageClose, mouseMove, collectionTable, submit, actions } from './components/index.js'
 export default {
     name: 'App',
-    components: { pageNavigate, elClick, sysSleep, elOutput, loopClick, onInput, pageJavascript, collectSingleElements, pageClose, mouseMove, collectionTable, submit, actions, draggable, },
+    components: { pageNavigate, elClick, sysSleep, elOutput, loopClick, elInput, pageJavascript, collectSingleElements, pageClose, mouseMove, collectionTable, submit, actions, draggable, },
     props: {},
     data () {
         return {
@@ -253,7 +253,7 @@ export default {
                     this.dynamicComponent = sysSleep
                     break;
                 case 'el.input':
-                    this.dynamicComponent = onInput
+                    this.dynamicComponent = elInput
                     break;
                 case 'el.output':
                     this.dynamicComponent = elOutput

src/components/collectionTable.vue

@@ -6,22 +6,22 @@
             <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;">
+        <div style="overflow: auto;min-width: 460px;">
             <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">
+                <vxe-column field="" title="列名" min-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>
                     </template>
                 </vxe-column>
-                <vxe-column field="" title="属性名" width="150">
+                <vxe-column field="" title="属性名" min-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">
+                <vxe-column field="" title="值类型" min-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="bottom" v-if="row.typeOptions.length > 1">
@@ -31,12 +31,12 @@
                         </div>
                     </template>
                 </vxe-column>
-                <vxe-column field="" title="当前选中文本值" width="150">
+                <vxe-column field="" title="当前选中文本值" min-width="150">
                     <template v-slot="{ row }">
                         {{ row.contentText }}
                     </template>
                 </vxe-column>
-                <vxe-column title="操作" width="100">
+                <vxe-column title="操作" min-width="100">
                     <template #default="{ row }">
                         <vxe-button status="danger" content="删除" @click="columnDelete(row)" style="margin-right: 20px;width: 50px;"></vxe-button>
                     </template>

src/components/onInput.vue → src/components/elInput.vue

 <template>
-  <div class="onInput">
+  <div class="elInput">
     <!-- 操作按钮区域 -->
     <div style="width: 130px;height: 50px; margin-left: 15px; text-align: left;display: flex;align-items: center;justify-content: space-between;">
       <el-button size="small" class="button-new-tag" @click="selectElement">选择元素</el-button>
@@ -26,7 +26,7 @@
 
 <script>
 export default {
-  name: 'onInput',
+  name: 'elInput',
   components: {},
   props: ['actionName', 'actionType', 'dynamicTagObj'],
   data () {

src/components/index.js

@@ -2,7 +2,7 @@ import pageNavigate from './pageNavigates.vue';
 import elClick from './elClick.vue';
 import sysSleep from './sysSleep.vue';
 import elOutput from './elOutput.vue';
-import onInput from './onInput.vue';
+import elInput from './elInput.vue';
 import pageJavascript from './pageJavascript.vue';
 import loopClick from './loopClick.vue';
 import collectSingleElements from './collectSingleElements.vue';
@@ -12,4 +12,4 @@ import collectionTable from './collectionTable.vue';
 import submit from './submit.vue';
 import actions from './actions.vue';
 
-export { pageNavigate, elClick, sysSleep, elOutput, onInput, pageJavascript, loopClick, collectSingleElements, pageClose, mouseMove, collectionTable, submit, actions };
\ No newline at end of file
+export { pageNavigate, elClick, sysSleep, elOutput, elInput, pageJavascript, loopClick, collectSingleElements, pageClose, mouseMove, collectionTable, submit, actions };
\ No newline at end of file