1

src/components/table-form/components.vue

@@ -1,7 +1,7 @@
 <template>
     <div
-        :id="id" class="hc-table-form-components-box" :data-key="keyname"
-        :data-index="`${trindex}_${tdindex}`" :data-x1="x1" :data-x2="x2" :data-y1="y1" :data-y2="y2"
+        :id="id" class="hc-table-form-components-box" :data-key="keyname" :data-index="`${trindex}_${tdindex}`"
+        :data-x1="x1" :data-x2="x2" :data-y1="y1" :data-y2="y2"
     >
         {{ name }}
     </div>

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

@@ -38,7 +38,6 @@ const isTableForm = ref(false)
 
 //渲染完成
 onMounted(() => {
-    initClickEvents()
     getExcelHtml()
 })
 
@@ -54,11 +53,6 @@ watch(() => props.form, (val) => {
     setFormData(val)
 }, { deep: true })
 
-//注册被点击事件
-const initClickEvents = () => {
-
-}
-
 const setExcelHtml = () => {
     //先卸载
     if (tableFormApp.value) {
@@ -90,7 +84,7 @@ const getExcelHtml = () => {
         onFormDataChange: (form) => {
             excelForm.value = form
         },
-        onRight: () => {
+        /*onRight: () => {
             console.log('onRight')
         },
         onBlur: () => {
@@ -98,12 +92,13 @@ const getExcelHtml = () => {
         },
         onLeftClick: () => {
             console.log('onLeftClick')
-        },
+        },*/
     })
     tableFormApp.value = app
     tableFormVM.value = vm
     excelForm.value.isRenderForm = true
     emit('render', excelForm.value)
+    initEmits()
 }
 
 //获取表单数据
@@ -124,12 +119,50 @@ const unmountHtml = () => {
     }
 }
 
+//获取所有组件
+const getAllComponents = async () => {
+    try {
+        return document.getElementById(`table-form-${uuid}`).querySelectorAll('.hc-table-form-components-box')
+    } catch (error) {
+        return []
+    }
+}
+
+//注册事件
+const initEmits = async () => {
+    const boxs = await getAllComponents()
+    for (let i = 0; i < boxs.length; i++) {
+        boxs[i].addEventListener('click', async (e) => {
+            await tableFormComponentsClick(e)
+        })
+    }
+}
+
+//被点击
+const tableFormComponentsClick = async (e) => {
+    const boxs = await getAllComponents()
+    for (let i = 0; i < boxs.length; i++) {
+        boxs[i].classList.remove('cur')
+    }
+    e.target.classList.add('cur')
+    emit('tap', e)
+}
+
+//清空全部选择
+const clearClick = async () => {
+    const boxs = await getAllComponents()
+    for (let i = 0; i < boxs.length; i++) {
+        boxs[i].classList.remove('cur')
+    }
+}
+
 // 暴露出去
 defineExpose({
     getFormData,
     setFormData,
     setExcelHtml,
     unmountHtml,
+    clearClick,
 })
 </script>
 

src/views/exctab/element/index.vue

@@ -23,7 +23,7 @@
                 </hc-card>
             </template>
             <hc-card :title="`【元素识别】${isNullES(nodeInfo.name) ? '表名称' : nodeInfo.name}`">
-                <hc-table-form ref="excelRef" :html="excelHtml" @focus="excelClick" />
+                <hc-table-form ref="excelRef" :html="excelHtml" @tap="excelClick" />
             </hc-card>
             <template #right>
                 <hc-card>
@@ -190,7 +190,7 @@ const getTableData = async () => {
 //框框被点击
 const excelClick = async (item) => {
     const arr = tableData.value
-    let key = item.trindex + '_' + item.tdindex
+    let key = item.target.getAttribute('data-index')
     for (let i = 0; i < arr.length; i++) {
         let xys = arr[i].xys.split(',')
         if (xys.indexOf(key) > -1) {