动态添加表格进行数据回显

董国庆

2025-04-30 4a69fdde1710397eb0afd09087854127e3f842b6

 laboratory/src/components/DynamicComponent/index.vue

@@ -298,26 +298,6 @@
        })
        .catch(() => {});
    },
    confirmAddRow(formData) {
      const { idx, rowIndex, isEdit } = this.rowDialog;
      if (isEdit) {
        // 编辑模式：替换原有行数据
        this.components[idx].data.rows.splice(rowIndex, 1, formData);
      } else {
        // 新增模式：添加新行数据
        this.components[idx].data.rows.push(formData);
      }
      this.rowDialog.visible = false;
      // 重置对话框数据
      this.rowDialog = {
        visible: false,
        idx: null,
        rowIndex: null,
        isEdit: false,
        headers: [],
        form: {},
      };
    },
    handleFileChange(idx, fileList) {
      this.components[idx].data.fileList = fileList;
    },
@@ -329,70 +309,6 @@
      file.url = res.url;
      this.components[idx].data.imageList = fileList;
    },
    // 获取所有组件数据
    getComponentsData() {
      // 整理数据，图片只保留url
      const submitData = this.components.map((item) => {
        if (item.type === "richText") {
          // 获取富文本编辑器的内容
          const editorRef = this.$refs[`editor_${item.id}`];
          return {
            ...item,
            data: {
              content: editorRef ? editorRef.getContent() : item.data.content
            }
          };
        }
        if (item.type === "imageUpload") {
          return {
            ...item,
            data: {
              imageList: item.data.imageList.map((img) => ({ url: img.url })),
            },
          };
        }
        return item;
      });
      return submitData;
    },
    // 验证所有组件数据
    validateComponents() {
      // 验证富文本编辑器
      const richTextValid = this.components.every(item => {
        if (item.type === 'richText') {
          const editorRef = this.$refs[`editor_${item.id}`];
          return editorRef && editorRef.getContent().trim() !== '';
        }
        return true;
      });

      if (!richTextValid) {
        this.$message.error('请填写所有富文本内容');
        return false;
      }

      // 验证表格数据
      const tableValid = this.components.every(item => {
        if (item.type === 'customTable') {
          return item.data.rows.length > 0;
        }
        return true;
      });

      if (!tableValid) {
        this.$message.error('请至少添加一行表格数据');
        return false;
      }

      return true;
    },
    // 提交数据
    submit() {
      if (this.validateComponents()) {
        const data = this.getComponentsData();
        this.$emit('submit', data);
      }
    }
  },
};
</script>