Vue中如何导出v-html组件修改后的渲染HTML字符串

我使用SheetJS的sheet_to_html()函数将Excel区域生成HTML，再通过v-html渲染表格。用户可点击表格元素切换my-class类，我希望获取修改类后的更新HTML字符串，当前在Electron环境中使用Vue.js。我的Vue组件代码如下：

<script setup>
import { utils } from 'xlsx';

const htmlParse = utils.sheet_to_html(worksheet)

function classModifier(event){
    const clickedElement = event.target
    clickedElement.classList.toggle("my-class")
}

</script>

<template>
   <div @click="classModifier" v-html="htmlParse"></div>
</template>

要获取修改类后的最新HTML字符串，可通过以下步骤实现：

• 绑定容器DOM引用：用Vue的ref获取渲染表格的容器元素，方便后续读取其内容
• 过滤有效点击目标：只处理表格内的单元格元素，避免空白区域的误触发
• 实时更新HTML字符串：每次切换类后，直接读取容器的innerHTML属性，得到包含最新类名的HTML内容

修改后的组件代码如下：

<script setup>
import { utils } from 'xlsx';
import { ref, onMounted } from 'vue';

const htmlParse = utils.sheet_to_html(worksheet);
const tableContainer = ref(null);
let updatedHtml = ref('');

function classModifier(event){
    const clickedElement = event.target;
    // 仅处理表格单元格元素
    if(['TD', 'TH'].includes(clickedElement.tagName)){
        clickedElement.classList.toggle("my-class");
        // 同步最新HTML内容
        updatedHtml.value = tableContainer.value.innerHTML;
    }
}

onMounted(() => {
    // 初始化时获取初始HTML
    updatedHtml.value = tableContainer.value.innerHTML;
});
</script>

<template>
   <div ref="tableContainer" @click="classModifier" v-html="htmlParse"></div>
   <!-- 可选：实时预览最新HTML字符串 -->
   <textarea v-model="updatedHtml" rows="10" cols="80"></textarea>
</template>

• 使用ref绑定容器：通过ref="tableContainer"直接获取DOM元素，是Vue中操作DOM的标准方式
• 限制点击范围：判断元素标签名确保只有表格单元格触发类切换，提升交互准确性
• innerHTML直接取值：容器的innerHTML会实时反映DOM的修改，无需额外解析或转换

内容的提问来源于stack exchange，提问作者Yolo_chicken