问题：

vue.js - 表格无法显示：如何解决 'HtmlAttributePlugin' 错误？

齐阎宝

2026-01-04

解决 'HtmlAttributePlugin' 错误
看下

<title>WPF & WEBVIEW2 混合开发学习</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>
<script src="https://unpkg.com/@visactor/vue-vtable/dist/vue-vtable.min.js"></script>

<div id="app"> <ListTable :options="tableOptions" /> </div>

const { createApp } = Vue; 
const app = createApp({
    setup() {
        const option = {
            columns: [
                { field: '0', caption: '名称' },
                { field: '1', caption: '年龄' },
                { field: '2', caption: '性别' },
                { field: '3', caption: '爱好' }
            ],
            records: new Array(1000).fill(['Yelineee', 18, '男', '��'])
        };
        return { tableOptions: option };
    }
});
app.mount('#app');

共有2个答案

杨宏儒

2026-01-04

Vue 3 + vue-vtable 表格无法显示：如何解决 'HtmlAttributePlugin' 错误？

邓季

2026-01-04

基于您提供的代码和描述的 'HtmlAttributePlugin' 错误，我诊断出问题可能源于 VTable 的列配置中使用 caption 而非标准属性 title。VTable（特别是 @visactor/vtable）内部使用 HtmlAttributePlugin 来处理单元格的 HTML 属性渲染，当遇到无效属性（如 caption）时，会抛出错误或导致表格无法显示。错误通常会在浏览器控制台中出现类似 Uncaught Error: Invalid column option 或直接引用 HtmlAttributePlugin 的消息。

解决方案

修改列配置中的 caption 为 title：
- 在 VTable 中，列定义应使用 title 属性表示列标题，而不是 caption。caption 是无效属性，会导致 HtmlAttributePlugin 处理失败。
- 在您的代码中，将：
```
columns: [
    { field: '0', caption: '名称' },
    { field: '1', caption: '年龄' },
    { field: '2', caption: '性别' },
    { field: '3', caption: '爱好' }
],
```
  改为：
```
columns: [
    { field: '0', title: '名称' },
    { field: '1', title: '年龄' },
    { field: '2', title: '性别' },
    { field: '3', title: '爱好' }
],
```
- 原因：title 是 VTable 的合法属性，HtmlAttributePlugin 能正确处理它。使用 caption 会导致插件解析错误。

确保所有脚本正确加载：

检查浏览器控制台（按 F12 打开）是否有 404 错误或其他加载失败。所有 CDN 链接应可用：
- Vue 3 链接正常：https://unpkg.com/vue@3/dist/vue.global.prod.js
- VTable 和 Vue-VTable 链接正常：确保版本兼容（当前代码使用最新版本，一般没问题）。

在 <head> 中添加错误处理来验证加载：

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js" onerror="console.error('Vue failed to load')"></script>
<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js" onerror="console.error('VTable failed to load')"></script>
<script src="https://unpkg.com/@visactor/vue-vtable/dist/vue-vtable.min.js" onerror="console.error('Vue-VTable failed to load')"></script>

完整修复后的代码示例：
以下是您的代码修改后的版本。我已将 caption 改为 title，并添加了注释说明关键点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WPF & WEBVIEW2 混合开发学习</title>
    <!-- 引入 Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <!-- 引入 VTable 核心库 -->
    <script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>
    <!-- 引入 Vue-VTable 封装库 (自动注册全局组件) -->
    <script src="https://unpkg.com/@visactor/vue-vtable/dist/vue-vtable.min.js"></script>
</head>
<body>
    <div id="app"> 
        <ListTable :options="tableOptions" /> <!-- 确保组件名大小写匹配: 通常是 ListTable -->
    </div>

    <script>
        const { createApp } = Vue; 
        const app = createApp({
            setup() {
                // 使用 title 替代 caption
                const option = {
                    columns: [
                        { field: '0', title: '名称' }, // 修改为 title
                        { field: '1', title: '年龄' },
                        { field: '2', title: '性别' },
                        { field: '3', title: '爱好' }
                    ],
                    records: new Array(1000).fill(['Yelineee', 18, '男', '��']) // 包含 emoji 没有问题
                };
                return { tableOptions: option };
            }
        });
        app.mount('#app'); // 确保挂载点正确
    </script>
</body>
</html>

其他排查步骤：
- 检查控制台错误：运行页面后，按 F12 打开开发者工具，查看 Console 标签页。确认是否有具体错误（如 [VTable] Invalid column option 或 HtmlAttributePlugin is not defined）。如果有其他错误，请提供详细信息。
- 验证 Vue-VTable 注册：vue-vtable.min.js 应自动注册全局组件 <ListTable>。如果组件未注册，控制台会有 Unknown custom element 错误。手动注册可添加：
```
import { ListTable } from '@visactor/vue-vtable'; // 但 CDN 方式已全局注册，通常不需要
```
- 测试简化案例：移除复杂部分（如减少 records 数量），验证表格是否显示。
- 版本问题：确保所有库版本兼容。当前 CDN 链接使用最新版本（Vue 3.x 和 VTable 最新），但如果问题持续，尝试固定版本：
  - 例如：https://unpkg.com/vue@3.4.27/dist/vue.global.prod.js

如果修改后表格仍不显示，请提供浏览器控制台的具体错误消息，我会进一步帮助诊断！ ��

vue.js - 表格无法显示：如何解决 'HtmlAttributePlugin' 错误？

共有2个答案

解决方案

相关问答

相关文章

相关阅读

相关工具

相关文档