el-table某一列的表头添加两个点击按钮
时间: 2023-07-21 14:04:57 浏览: 242
要在el-table的某一列表头添加两个点击按钮,可以使用el-table-column的`header`属性自定义表头模板。在模板中添加两个按钮并绑定点击事件即可。
以下是一个示例代码:
```html
<el-table :data="tableData">
<el-table-column label="姓名">
<template slot="header">
<div>
姓名
<el-button type="text" @click="handleClick1">按钮1</el-button>
<el-button type="text" @click="handleClick2">按钮2</el-button>
</div>
</template>
<template slot-scope="scope">
{{ scope.row.name }}
</template>
</el-table-column>
<!-- 其他列 -->
</el-table>
```
在这个示例中,我们通过`slot="header"`来指定这是自定义的表头模板。在模板中,我们首先添加了“姓名”这个标题,然后又添加了两个按钮“按钮1”和“按钮2”,并且分别绑定了`handleClick1`和`handleClick2`两个点击事件。
需要注意的是,为了让表头和表格数据对齐,我们还需要在表头模板中添加与表格数据列数相同的`<template slot-scope="scope">`标签,并在其中添加表格数据渲染模板。在这个示例中,我们只是简单地输出了每行数据的姓名。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)