Vue中Element UI表格列如何添加自定义内容（含代码示例）

要在period字段旁添加自定义内容（比如countNumber），不能直接通过prop属性实现——因为prop只能直接渲染数据源中单一字段的内容。你需要通过Element UI表格列的**插槽（slot）**自定义单元格内容，步骤如下：

1. 先更新periods数组，补充需要展示的countNumber字段：

periods: [
  { period: 'Today', countNumber: 10 },
  { period: 'Yesterday', countNumber: 5 },
],

2. 修改表格列代码，替换原有的prop="period"列，用插槽自定义组合内容：

<el-table :data="periods" :show-header="false">
  <el-table-column type="expand">
    <template v-slot="scope">
      <div v-if="scope.row.period === 'Today'">
        //Do something
      </div>
      <div v-else-if="scope.row.period === 'Yesterday'">
        //Do something else
      </div>
    </template>
  </el-table-column>
  <!-- 自定义列内容，同时展示period和countNumber -->
  <el-table-column>
    <template v-slot="scope">
      <span>{{ scope.row.period }}</span>
      <span style="margin-left: 8px; color: #666;">({{ scope.row.countNumber }})</span>
    </template>
  </el-table-column>
</el-table>

说明： #

• 通过v-slot="scope"可以获取当前行的数据源scope.row，以此自由组合渲染多个字段内容。
• 你可以根据需求调整自定义内容的样式，比如间距、颜色、排版等。

内容的提问来源于stack exchange，提问作者the man in the pink suit