Element UI自定义列：Table列自定义渲染技巧

原创 于 2025-09-24 13:04:42 发布 · 465 阅读 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

Element UI自定义列：Table列自定义渲染技巧

【免费下载链接】element A Vue.js 2.0 UI Toolkit for Web 【免费下载链接】element 项目地址: https://gitcode.com/gh_mirrors/eleme/element

在前端开发中，表格（Table）是展示数据的核心组件，但面对复杂的业务场景时，默认的列渲染方式往往难以满足需求。Element UI（饿了么UI组件库）提供了灵活的Table列自定义能力，让开发者可以轻松实现数据格式化、条件样式、嵌套组件等高级功能。本文将系统讲解Table列自定义渲染的多种技巧，帮助你解决90%以上的表格展示难题。

自定义渲染的核心方案

Element UI的Table组件通过两种主要方式支持列自定义：属性配置和作用域插槽（Scoped Slot）。这两种方式分别适用于不同复杂度的场景，形成了完整的自定义渲染解决方案。

技术选型对比

实现方式适用场景性能表现灵活性代码位置
formatter属性简单文本格式化高（原生渲染）低（仅文本处理）JS逻辑区
slot-scope插槽复杂DOM结构/组件嵌套中（VNode渲染）高（完全自定义）模板区
render函数动态组件渲染中（编程式渲染）最高（JSX支持）列定义处

从源码设计可以看出，Element UI的TableColumn组件在初始化时会优先检查作用域插槽，再处理formatter属性，形成了完整的渲染优先级链条：

// 源码位置：[packages/table/src/table-column.js](https://gitcode.com/gh_mirrors/eleme/element/blob/c345bb453bf11badb4831a6a3f600c9372b3a336/packages/table/src/table-column.js?utm_source=gitcode_repo_files#L174)
column.renderCell = (h, data) => {
  let children = null;
  if (this.$scopedSlots.default) {
    children = this.$scopedSlots.default(data); // 优先使用插槽
  } else {
    children = originRenderCell(h, data); // 其次使用formatter
  }
  // ...
};

formatter：轻量级文本转换

formatter是最简单直接的自定义方式，适用于纯文本内容的格式化处理。它接受一个函数，返回处理后的字符串，函数参数包含当前行数据、列配置和原始值。

基础用法：数据格式化

<el-table-column
  prop="date"
  label="日期"
  :formatter="formatDate">
</el-table-column>

methods: {
  formatDate(row, column, value) {
    // 将ISO日期格式化为YYYY-MM-DD
    return new Date(value).toLocaleDateString('zh-CN');
  }
}

高级应用：状态映射与计算

通过formatter可以实现状态值到语义化文本的映射，甚至进行简单的计算：

<el-table-column
  prop="status"
  label="订单状态"
  :formatter="formatStatus">
</el-table-column>
<el-table-column
  label="总额"
  :formatter="calculateTotal">
</el-table-column>

methods: {
  formatStatus(row) {
    const statusMap = {
      0: '待支付',
      1: '已支付',
      2: '已发货',
      3: '已完成',
      4: '已取消'
    };
    return `<span class="status-${row.status}">${statusMap[row.status] || '未知'}</span>`;
  },
  calculateTotal(row) {
    // 计算商品总价
    return '¥' + (row.price * row.quantity).toFixed(2);
  }
}

注意：formatter返回的HTML字符串不会被解析，如需渲染HTML需使用v-html指令，这种情况建议使用作用域插槽。

Scoped Slot：复杂DOM结构渲染

当需要在单元格中嵌入按钮、图标、进度条等复杂组件时，作用域插槽（Scoped Slot）是最佳选择。Element UI通过slot-scope属性暴露表格内部数据，使开发者能够完全控制单元格内容。

基础用法：操作按钮组

<el-table-column label="操作" width="200">
  <template slot-scope="scope">
    <el-button 
      size="small" 
      @click="viewDetail(scope.row)">查看</el-button>
    <el-button 
      size="small" 
      type="primary" 
      @click="editItem(scope.row)">编辑</el-button>
    <el-button 
      size="small" 
      type="danger" 
      @click="deleteItem(scope.row, scope.$index)">删除</el-button>
  </template>
</el-table-column>

这里的scope对象包含以下核心属性：

  • row：当前行数据
  • column：当前列配置
  • $index：行索引
  • store：Table内部状态管理对象

高级应用：条件渲染与组件嵌套

结合Element UI的其他组件，可以实现更复杂的交互效果：

<el-table-column prop="progress" label="完成进度">
  <template slot-scope="scope">
    <el-progress 
      :percentage="scope.row.progress" 
      :status="scope.row.progress === 100 ? 'success' : 'active'"
      :stroke-width="6"
      text-inside
      :format="(percentage) => `${percentage}%`">
    </el-progress>
  </template>
</el-table-column>

<el-table-column prop="priority" label="优先级">
  <template slot-scope="scope">
    <el-tag 
      :type="['', 'danger', 'warning', 'success'][scope.row.priority]">
      {{ ['', '高', '中', '低'][scope.row.priority] || '普通' }}
    </el-tag>
  </template>
</el-table-column>

动态内容：根据数据状态展示不同UI

<el-table-column prop="status" label="审核状态">
  <template slot-scope="scope">
    <div v-if="scope.row.status === 0" class="status-pending">
      <i class="el-icon-time"></i> 待审核
    </div>
    <div v-else-if="scope.row.status === 1" class="status-approved">
      <i class="el-icon-check"></i> 已通过
    </div>
    <div v-else class="status-rejected">
      <i class="el-icon-close"></i> 已拒绝
      <el-tooltip effect="dark" content="拒绝原因: {{ scope.row.reason }}">
        <i class="el-icon-info"></i>
      </el-tooltip>
    </div>
  </template>
</el-table-column>

自定义表头

除了单元格内容，Element UI也支持对表头进行自定义。通过header插槽可以修改表头显示内容，实现排序指示器、筛选器等高级功能。

基础表头自定义

<el-table-column prop="name" label="商品名称">
  <template slot="header" slot-scope="scope">
    <i class="el-icon-goods"></i> 商品名称
  </template>
</el-table-column>

带筛选器的表头

<el-table-column prop="category" label="商品分类">
  <template slot="header" slot-scope="scope">
    <el-popover
      placement="bottom"
      trigger="click">
      <el-checkbox-group v-model="selectedCategories" @change="filterTable">
        <el-checkbox label="电子产品"></el-checkbox>
        <el-checkbox label="服装鞋帽"></el-checkbox>
        <el-checkbox label="食品饮料"></el-checkbox>
      </el-checkbox-group>
      <span slot="reference">
        商品分类 <i class="el-icon-arrow-down"></i>
      </span>
    </el-popover>
  </template>
</el-table-column>

性能优化与最佳实践

避免在渲染函数中执行复杂计算

频繁的计算会导致表格滚动卡顿，建议在数据加载时预处理数据：

// 优化前：每次渲染都计算
formatPrice(row) {
  return '¥' + (row.price * exchangeRate).toFixed(2);
}

// 优化后：数据加载时预处理
this.tableData = rawData.map(item => ({
  ...item,
  formattedPrice: '¥' + (item.price * exchangeRate).toFixed(2)
}));

使用fixed属性固定列宽

对于操作列等固定内容，使用fixed属性可以提高渲染性能：

<el-table-column 
  fixed="right" 
  label="操作" 
  width="180">
  <!-- 操作按钮 -->
</el-table-column>

大数据量渲染优化

当表格数据超过1000行时，建议使用虚拟滚动或分页加载。Element UI的Table组件内置了对虚拟滚动的支持：

<el-table
  :data="largeTableData"
  height="500"
  v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="10">
  <!-- 列定义 -->
</el-table>

自定义列的实现原理

从Element UI的源码可以看出，Table组件通过Column组件的renderCell方法完成单元格渲染：

// 源码位置：[packages/table/src/config.js](https://gitcode.com/gh_mirrors/eleme/element/blob/c345bb453bf11badb4831a6a3f600c9372b3a336/packages/table/src/config.js?utm_source=gitcode_repo_files#L91)
export function defaultRenderCell(h, { row, column, $index }) {
  const property = column.property;
  const value = property && getPropByPath(row, property).v;
  if (column && column.formatter) {
    return column.formatter(row, column, value, $index);
  }
  return value;
}

这个函数首先尝试获取列定义的property对应的值，然后检查是否有formatter函数，最后返回处理后的值。当使用作用域插槽时，这个默认渲染逻辑会被插槽内容覆盖。

常见问题解决方案

动态控制列显示/隐藏

通过v-if可以动态控制列的显示状态，但频繁切换可能导致性能问题。更好的方式是使用Table的columns属性动态配置列：

data() {
  return {
    columns: [
      { prop: 'date', label: '日期', visible: true },
      { prop: 'name', label: '姓名', visible: true },
      { prop: 'address', label: '地址', visible: false }
    ]
  };
}

<el-table :data="tableData">
  <el-table-column 
    v-for="col in columns" 
    :key="col.prop"
    :prop="col.prop"
    :label="col.label"
    v-if="col.visible">
  </el-table-column>
</el-table>

嵌套表格实现

利用作用域插槽可以轻松实现嵌套表格：

<el-table-column label="详情">
  <template slot-scope="scope">
    <el-table :data="scope.row.details">
      <el-table-column prop="product" label="商品"></el-table-column>
      <el-table-column prop="quantity" label="数量"></el-table-column>
      <el-table-column prop="price" label="单价"></el-table-column>
    </el-table>
  </template>
</el-table-column>

自定义列宽调整

Element UI支持通过拖拽调整列宽，如需预设列宽或根据内容自适应：

<el-table-column 
  prop="description" 
  label="描述"
  width="auto"  <!-- 自适应内容宽度 -->
  min-width="150"  <!-- 最小宽度限制 -->
  max-width="300">  <!-- 最大宽度限制 -->
</el-table-column>

总结与进阶展望

Element UI的Table列自定义功能为数据展示提供了无限可能，从简单的文本格式化到复杂的组件嵌套，都可以通过formatter和Scoped Slot实现。在实际开发中，应根据需求复杂度选择合适的方案：

  • 简单文本处理：使用formatter属性
  • 复杂DOM结构：使用Scoped Slot
  • 表头自定义：使用header插槽
  • 动态列管理：使用columns属性配置

随着业务复杂度的提升，你可能还需要探索更高级的用法，如：

  • 结合Vue的函数式组件实现高性能渲染
  • 使用render函数动态生成列内容
  • 开发自定义单元格组件库

通过灵活运用这些技巧，Element UI的Table组件可以满足几乎所有的数据展示需求，为用户提供清晰、直观、交互友好的数据表格体验。

官方文档：examples/docs/zh-CN/table.md Table组件源码：packages/table/src/table.vue 列定义源码：packages/table/src/table-column.js

【免费下载链接】element A Vue.js 2.0 UI Toolkit for Web 【免费下载链接】element 项目地址: https://gitcode.com/gh_mirrors/eleme/element

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值