巧用slot-scope，让Element-UI表格按钮随心所欲

2023-12-18 12:06:43

在网页开发中，表格是一种常见且重要的元素，它可以清晰地组织和展示数据，方便用户查看和理解。Element-UI作为一款优秀的UI库，提供了丰富的表格组件，可以满足不同场景下的使用需求。本文将重点介绍Element-UI表格中如何通过slot-scope="scope"添加操作按钮，自定义列内容，让表格按钮随心所欲，满足不同需求。

一、操作按钮的添加

在Element-UI表格中，我们可以通过slot-scope="scope"添加操作按钮，这是一种非常灵活的方式，可以满足不同场景下的需求。

<el-table>
  <el-table-column prop="name">
    <template slot-scope="scope">
      <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
      <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

在这个例子中，我们在表格的最后一列添加了一个自定义的列，通过slot-scope="scope"将当前行的信息传递给模板，然后在模板中使用scope.row获取当前行的值，并根据需要添加操作按钮。

二、自定义列内容

除了添加操作按钮，我们还可以使用slot-scope="scope"自定义列的内容。

<el-table>
  <el-table-column prop="name">
    <template slot-scope="scope">
      {{ scope.row.name }} ({{ scope.row.age }})
    </template>
  </el-table-column>
</el-table>