Element UI 表格基础教程：与 3D 场景结合实践

Element UI 的表格组件（el-table）是数据展示和管理的核心组件之一，本教程将基于3D 场景示例，讲解如何与表格结合使用。

1. 表格基本结构

Element UI 表格的最基本结构如下：

<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址">
    </el-table-column>
</el-table>

• :data 绑定表格的数据源，通常是一个数组
• el-table-column 定义每一列
• prop 指定该列对应数据对象的属性名
• label 用来指定对应的列名

在示例中，表格定义如下：

<el-table :data="objectList" style="width: 100%"
    :header-cell-style="{background: 'rgba(50, 50, 60, 0.9)', color: '#e6e6e6'}"
    :cell-style="{background: 'rgba(40, 40, 50, 0.7)', color: '#e6e6e6'}">
</el-table>

2. 数据源绑定

表格的数据来源是 objectList 数组，每个元素包含 3D 物体的信息：

data() {
    return {
        objectList: [], // 初始化空数组
    };
}

// 向列表添加物体信息
addObjectToList(mesh) {
    const objectInfo = {
        name: mesh.name, // 物体名称
        type: mesh.userData.type, // 物体类型
        position: { // 位置信息
            x: mesh.position.x,
            y: mesh.position.y,
            z: mesh.position.z
        },
        mesh: mesh // 保存Three.js对象引用
    };
    this.objectList.push(objectInfo); // 添加到数组
}

3. 自定义列内容

当需要自定义列的显示内容时，可以使用 template 插槽

3.1 类型列自定义

<el-table-column prop="type" label="类型" width="80">
    <template slot-scope="scope">
        <span class="type-badge">{{ scope.row.type }}</span>
    </template>
</el-table-column>

• slot-scope="scope" 获取当前行的数据上下文
• scope.row 表示当前行的数据对象
• 可以在这里添加自定义 HTML 和样式

3.2 位置信息格式化

<el-table-column label="位置" width="120">
    <template slot-scope="scope">
        <div class="position-cell">
            ({{ scope.row.position.x.toFixed(1) }},
            {{ scope.row.position.y.toFixed(1) }},
            {{ scope.row.position.z.toFixed(1) }})
        </div>
    </template>
</el-table-column>

这里将三维坐标格式化显示，并保留一位小数，使数据更易读。

4. 操作列实现

通常表格最后一列是操作列，用于对当前行数据进行操作：

<el-table-column label="操作" width="80">
    <template slot-scope="scope">
        <el-button type="danger" icon="el-icon-delete" size="mini" circle
            @click="removeObject(scope.$index, scope.row)">
        </el-button>
    </template>
</el-table-column>

• scope.$index 可以获取当前行的索引
• 通过 @click 绑定删除方法，传递索引和行数据

删除方法实现：

removeObject(index, row) {
    this.$confirm('确定要删除这个物体吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        if (row.mesh) {
            // 从3D场景中移除物体
            this.scene.remove(row.mesh);
            // 从表格数据中移除
            this.objectList.splice(index, 1);
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
        }
    });
}

5. 表格样式自定义

可以通过以下属性自定义表格样式：

• :header-cell-style 自定义表头样式
• :cell-style 自定义单元格样式
• stripe 斑马条纹效果
• border 显示边框
• size 表格尺寸（mini/small/medium）

示例中使用了半透明背景色，使表格与 3D 场景更好地融合：

<el-table :data="objectList" style="width: 100%"
    :header-cell-style="{background: 'rgba(50, 50, 60, 0.9)', color: '#e6e6e6'}"
    :cell-style="{background: 'rgba(40, 40, 50, 0.7)', color: '#e6e6e6'}">

6. 表格与数据同步

在本示例中，表格不仅是数据的展示，还与 3D 场景中的物体保持同步：

• 当通过对话框添加新物体时：创建 Three.js 物体并添加到场景同时添加数据到 objectList，表格自动更新
• 当删除表格中的物体时：从 objectList 中移除数据，表格自动更新，同时从 Three.js 场景中移除对应的 3D 物体

这种双向绑定机制使得数据管理变得简单直观。

总结

Element UI 表格组件通过简单的配置就能实现强大的数据展示和操作功能，核心要点包括：

1. 正确绑定数据源
2. 合理定义表格列
3. 使用插槽自定义内容
4. 绑定事件处理数据操作
5. 自定义样式适应整体 UI

在实际项目中，还可以根据需求添加排序、筛选、分页等功能，使表格更加强大。