element-ui table隐藏表头中的全选框
时间: 2023-10-12 09:15:24 浏览: 62
你可以在 `el-table` 组件中使用 `show-header` 属性来隐藏表头,然后在 `el-table-column` 组件中使用 `type="selection"` 来添加全选框。这样只有全选框会显示,表头会被隐藏。
以下是示例代码:
```html
<template>
<el-table :data="tableData" show-header>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: 'John',
age: 22,
address: '123 Main St'
},
{
name: 'Jane',
age: 30,
address: '456 Broadway'
}
]
};
}
};
</script>
```
在上面的示例中,`el-table` 组件的 `show-header` 属性被设置为 `true`,因此表头会被隐藏。然后在第一个 `el-table-column` 组件中,`type` 属性被设置为 `selection`,这将添加全选框到该列中。其他列则按照正常方式显示。
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)
![](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/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)