优化模板表格编辑功能并修复DOM查询方式

src/components/templateDiv/customTable.vue

@@ -320,8 +320,8 @@
           rowspan: 1,
           colspan: 1,
           colspanKey: [],
-          width: width||100,
-          style: { width: width||100 },
+          width: width || 100,
+          style: { width: width || 100 },
           id: generateRandomString(5)
         };
       },
@@ -402,8 +402,11 @@
         }
 
         this.columns.forEach((item, index) => {
-
-          this.columns[index].splice(_rowIndex + 1, 0, this.getInput(this.columns[index][_rowIndex-1]?.style.width));
+          this.columns[index].splice(
+            _rowIndex + 1,
+            0,
+            this.getInput(this.columns[index][_rowIndex - 1]?.style.width)
+          );
         });
 
         // }
@@ -488,28 +491,31 @@
         this.units = units || {};
       },
       editInputChange(domObj) {
-        console.log(domObj, 'domObj');
         let data = JSON.parse(JSON.stringify(domObj));
         if (data.equation) {
-          this.equation[this.domId] = data.equation;
+          this.equation[data.id] = data.equation;
         }
         if (data.units) {
-          this.units[this.domId] = data.units;
+          this.units[data.id] = data.units;
         }
-        let dom = document.getElementById(data.id);
+        let parentDom = document.getElementById(this.id);
+        let dom = parentDom.querySelector('#' + data.id);
 
         this.columns.forEach((item, index) => {
           let rowsIndex = item.findIndex((cells) => cells.id == this.domId);
+          this.$set(this.columns[index], rowsIndex, data);
+          rowsIndex = item.findIndex((cells) => cells.id == data.id);
 
-          if (rowsIndex >= 0) {
-            let width = data.width - dom.parentElement.offsetWidth;
-            let newWidth = this.columns[index][rowsIndex].style.width + width;
-            this.columns[index][0].width = newWidth;
-            this.$set(this.columns[index], rowsIndex, data);
-            item.forEach((cell, _index) => {
-              this.$set(this.columns[index][_index].style, 'width', newWidth);
-              this.$set(this.columns[index][_index], 'width', newWidth);
-            });
+          if (dom) {
+            if (rowsIndex >= 0) {
+              let width = data.width - dom.parentElement.offsetWidth;
+              let newWidth = this.columns[index][rowsIndex].style.width + width;
+              this.columns[index][0].width = newWidth;
+              item.forEach((cell, _index) => {
+                this.$set(this.columns[index][_index].style, 'width', newWidth);
+                this.$set(this.columns[index][_index], 'width', newWidth);
+              });
+            }
           }
         });
       },
@@ -534,7 +540,8 @@
         if (!this.edit) {
           return;
         }
-        let dom = document.getElementById(item.id);
+        let parentDom = document.getElementById(this.id);
+        let dom = parentDom.querySelector('#' + item.id);
 
         this.domId = item.id;
         this.$emit('editShow', {

src/components/templateDiv/customText.vue

@@ -3,14 +3,16 @@
   <div>
     <el-popover
       style="position: fixed; z-index: 2000"
-      
       ref="popoverRef"
       v-model="rightClickShow"
       @click.native="rightClickShow = false"
     >
-      <div style="display: flex;">
+      <div style="display: flex">
         <el-button type="primary" @click="addHtml">插入输入框</el-button>
-        <el-button style="margin-left: 10px;"type="primary" @click="addHtml('checkbox')"
+        <el-button
+          style="margin-left: 10px"
+          type="primary"
+          @click="addHtml('checkbox')"
           >插入勾选框</el-button
         >
       </div>
@@ -63,7 +65,8 @@
         if (Object.keys(this.valueObj).length) {
           for (let key in this.valueObj) {
             this.$nextTick(() => {
-              let dom = document.getElementById(key);
+              let parentDom = document.getElementById(this.id);
+              let dom = parentDom.querySelector('#' + key);
               dom.value = this.valueObj[key];
               if (dom.type == 'checkbox') {
                 console.log(this.valueObj[key]);
@@ -137,7 +140,8 @@
       },
       equationValue({ domId, value }) {
         if (domId) {
-          let dom = document.getElementById(domId);
+          let parentDom = document.getElementById(this.id);
+          let dom = parentDom.querySelector('#' + domId);
           if (dom) {
             this.valueObj[domId] = value;
             dom.value = value;
@@ -160,7 +164,8 @@
         this.objInit();
       },
       editInputChange(domObj) {
-        let dom = document.getElementById(this.domId);
+        let parentDom = document.getElementById(this.id);
+        let dom = parentDom.querySelector('#' + this.domId);
         dom.style.width = domObj.width + 'px';
         if (domObj.readonly == 2) {
           dom.setAttribute('readonly', 'readonly');
@@ -176,6 +181,7 @@
           this.units[domObj.id] = domObj.units;
         }
         dom.id = domObj.id;
+        this.domId = domObj.id;
       },
       onRightClick(PointerEvent) {
         this.rightClickShow = true;
@@ -192,7 +198,7 @@
       inputChange(event) {
         if (event.target && event.target.className == 'templateInput') {
           if (event.target.type == 'checkbox') {
-            this.valueObj[event.target.id] = event.target.checked
+            this.valueObj[event.target.id] = event.target.checked;
           } else {
             this.valueObj[event.target.id] = event.target.value;
           }