Table-column Scoped Slot自定义

最新推荐文章于 2025-09-24 13:44:42 发布

原创最新推荐文章于 2025-09-24 13:44:42 发布 · 898 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #elementui

本文详细介绍了如何在Element-UI的el-table-column组件中使用header和defaultscoped-slot来灵活定制表格的表头和单元格内容，包括结合使用的情况。

Element-UI Table-column Scoped Slot 自定义

el-table-column组件提供了多个scoped-slot, 可以更加灵活地自定义列的内容

header：用于自定义表头的内容

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄">
    <!-- 自定义表头内容 -->
    <template slot="header" slot-scope="scope">
      <span>自定义表头</span>
    </template>
  </el-table-column>
</el-table>

default：用于自定义单元格的内容

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄">
    <!-- 自定义单元格内容 -->
    <template slot-scope="scope">
      <span>{{ scope.row.age }}</span>
      <el-button @click="edit(scope.row)">编辑</el-button>
    </template>
  </el-table-column>
</el-table>

header 和 default 的结合使用

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名">
    <!-- 自定义表头和单元格内容 -->
    <template slot="header" slot-scope="scope">
      <span>自定义表头</span>
    </template>
    <template slot-scope="scope">
      <span>{{ scope.row.name }}</span>
      <el-button @click="edit(scope.row)">编辑</el-button>
    </template>
  </el-table-column>
</el-table>