Table-column Scoped Slot自定义

最新推荐文章于 2024-07-30 14:02:27 发布

WKK_

最新推荐文章于 2024-07-30 14:02:27 发布

阅读量513

点赞数

文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/weixin_53812239/article/details/134710352

版权

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>