inline datatable编辑问题：含HTML标签行编辑时文本框显示HTML代码

我之前也碰到过一模一样的情况，核心问题在于你的DataTable组件进入编辑状态时，直接把带HTML标签的原始字符串绑定到了输入框上，没有做解析转义处理。这里给你几个实用的解决方案：

方法1：手动将HTML转换为纯文本（通用方案） #

不管你用的是哪种框架的DataTable，都可以通过JavaScript的DOMParser提取HTML里的纯文本内容，再把这个纯文本赋值给编辑框的绑定变量。示例代码如下：

// 封装一个HTML转纯文本的工具函数
const convertHtmlToPlainText = (htmlContent) => {
  if (!htmlContent) return '';
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlContent, 'text/html');
  return doc.body.textContent.trim();
};

// 进入编辑状态前调用这个函数处理内容
const editValue = convertHtmlToPlainText(row.targetField);
// 把editValue赋值给编辑框的绑定属性

这个方法能处理大多数简单甚至嵌套的HTML标签，准确提取出渲染后的文本内容，几乎适配所有前端框架。

方法2：利用组件自带配置（框架专属） #

如果你用的是成熟UI组件库（比如Element UI的el-table、Ant Design的a-table或Material-UI的DataGrid），通常会有内置的HTML处理配置：

• Element UI表格可以通过列的formatter属性，在编辑前把HTML内容格式化为纯文本；
• Ant Design表格可以在customRender里配合编辑状态判断，返回纯文本内容；
• Material-UI的DataGrid可以在editCellProps中指定valueGetter来转换HTML内容。

举个Element UI的简单示例：

<el-table-column prop="content" label="内容">
  <template #default="{ row }">
    <!-- 正常显示时渲染HTML -->
    <div v-html="row.content"></div>
  </template>
  <template #edit="{ row }">
    <!-- 编辑时显示纯文本 -->
    <el-input v-model="row.editContent" />
  </template>
</el-table-column>

<script setup>
// 触发编辑时初始化纯文本内容
const handleEdit = (row) => {
  row.editContent = convertHtmlToPlainText(row.content);
};
</script>

方法3：需保留格式时改用富文本编辑器 #

如果你的需求是编辑时也要保留HTML的格式（比如加粗、字体颜色），普通文本输入框就满足不了了，建议替换成支持HTML渲染/编辑的富文本编辑器（比如Quill、TinyMCE），直接把HTML内容传入编辑器，它会自动渲染成可视化格式供你编辑。

注意事项 #

• 处理用户输入的HTML时要注意XSS风险，一定要做安全过滤；
• 如果需要在编辑完成后把纯文本转回带HTML标签的格式，还需要额外写反向转换逻辑，不过大多数场景下编辑后保存纯文本，再重新包裹对应标签即可。

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