更新依赖

src/components/table-form/components.vue

@@ -1,11 +1,63 @@
 <template>
-    <el-input />
+    <div class="hc-table-form-components-box" @click="leftTap">{{ name }}</div>
 </template>
 
 <script setup>
+import { isNullES } from 'js-fast-way'
+import { onMounted, ref } from 'vue'
 
+const props = defineProps({
+    type: [String, Number],
+    placeholder: [String, Number],
+    trindex: [String, Number],
+    tdindex: [String, Number],
+    x1: [String, Number],
+    x2: [String, Number],
+    y1: [String, Number],
+    y2: [String, Number],
+    rows: [String, Number],
+    format: [String, Number],
+    valueFormat: [String, Number],
+    keyname: [String, Number],
+})
+
+//渲染完成
+onMounted(()=> {
+    matchingType()
+})
+
+//匹配组件类型
+const name = ref('')
+const typeObj = {
+    text: '输入框',
+    textarea: '多行输入框',
+    date: '日期框',
+}
+const matchingType = () => {
+    if (isNullES(props.type)) return
+    name.value = typeObj[props.type]
+}
+
+//左键点击了
+const leftTap = () => {
+    console.log('1111')
+}
 </script>
 
 <style scoped lang="scss">
-
+.hc-table-form-components-box {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #606266;
+    cursor: pointer;
+    border: 1px solid #dbdbdb;
+    border-radius: 3px;
+    transition: border 0.2s;
+    &:hover {
+        border-color: #1682f1;
+        background: #eddac4;
+    }
+}
 </style>

src/components/table-form/table-form.vue

@@ -89,7 +89,6 @@ const getExcelHtml = () => {
         appId: `#table-form-${uuid}`,
         onFormDataChange: (form) => {
             excelForm.value = form
-            emit('render', form)
         },
         onRight: () => {
             console.log('onRight')
@@ -137,8 +136,7 @@ defineExpose({
 <style lang="scss">
 //插入特殊字符弹窗的输入框
 .hc-table-form-data-item .hc-excel-table-form td,
-.hc-table-form-data-item .hc-excel-table-form td .el-input .el-input__wrapper .el-input__inner,
-.el-form-item.special-form-item .el-form-item__content .el-input .el-input__wrapper .el-input__inner {
+.hc-table-form-data-item .hc-excel-table-form td .hc-table-form-components-box {
     font-family: "hc-eudc", hc-sans, 宋体, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
 }
 
@@ -149,53 +147,24 @@ defineExpose({
     border: 1px solid #101010;
     border-radius: 4px;
     overflow: hidden;
+    .el-scrollbar .el-scrollbar__bar.is-vertical {
+        right: -10px;
+    }
     &.no-scroll-bar .el-scrollbar {
         display: none;
     }
     .hc-excel-table-form {
         position: relative;
-        display: flex;
         padding: 10px;
+        display: flex;
         justify-content: center;
         td {
             position: relative;
             padding: 6px;
             background-clip: padding-box;
-            .el-input {
-                clear: both;
-                color: #606266;
-                border-radius: 3px;
-                height: initial;
-                background-color: #ffffff !important;
-                .el-input__wrapper {
-                    background-color: inherit;
-                    caret-color: var(--el-color-primary);
-                }
-                .el-input__suffix-inner {
-                    width: 18px;
-                }
-            }
-            //焦点
-            .el-input .el-input__wrapper.is-focus, .el-input .el-input__wrapper:hover {
-                box-shadow: 0 0 0 1.5px var(--el-input-focus-border-color) inset;
-                background-color: #eddac4;
-            }
             //公式
-            &[gscolor] {
-                .el-input {
-                    background-color: #dcdcdc !important;
-                }
-            }
-            //文本选中颜色
-            .el-input .el-input__wrapper input {
-                &::selection {
-                    background: var(--el-color-primary-light-9);
-                    color: var(--el-color-primary);
-                }
-                &::-moz-selection {
-                    background: var(--el-color-primary-light-9);
-                    color: var(--el-color-primary);
-                }
+            &[gscolor] .hc-table-form-components-box {
+                background-color: #dcdcdc !important;
             }
         }
         //列合并的单元格

src/plugins/HTableForm.js

@@ -7,7 +7,7 @@ export default class HTableForm {
     static tableFormApp = null
     static tableFormVM = null
 
-    static createForm({ template, tableForm, appId, onRight, onBlur, onLeftClick, onFormDataChange }) {
+    static createForm({ template, tableForm, appId, onRight, onBlur, onFormDataChange }) {
         const app = createApp({
             //自定义组件，需要把饿了么的组件，或者自定义组件手动传递进来绑定，否则渲染时，自定义组件不会生效
             components,
@@ -53,13 +53,8 @@ export default class HTableForm {
                 },
                 //焦点事件
                 getInformation() {
+                    console.log('getInformation')
                 },
-                //日期选择事件
-                datePickerChange() {},
-                //上传完成
-                formUploadSuccess() {},
-                //删除上传的文件
-                delTableFormFile() {},
                 //失去焦点事件
                 getRegularExpression(event, reg, msg, a, b, leng, type, c, d) {
                     const KeyName = event?.target?.getAttribute('keyname') || ''
@@ -67,6 +62,12 @@ export default class HTableForm {
                         onBlur(event, KeyName, reg, this.formData[KeyName], msg, leng, type, c, d)
                     }
                 },
+                //日期选择事件
+                datePickerChange() {},
+                //上传完成
+                formUploadSuccess() {},
+                //删除上传的文件
+                delTableFormFile() {},
                 //远程搜索处理
                 formRemoteChange() {},
                 //多选框处理
@@ -82,13 +83,7 @@ export default class HTableForm {
                 //日期时间框键盘事件
                 dateKeydown() {},
                 //输入左键点击事件
-                inputLeftClick(event, key) {
-                    setTimeout(() => {
-                        if (onLeftClick) {
-                            onLeftClick(key)
-                        }
-                    }, 100)
-                },
+                inputLeftClick() {},
                 setChartRefs() {},
             },
             //html标签数据