el-table中隐藏表头中的复选框
时间: 2023-09-21 13:10:40 浏览: 52
可以通过设置 `show-header` 属性为 `false` 来隐藏表头,同时在表格数据中设置 `show-checkbox` 属性为 `true` 来显示复选框。
示例代码如下:
```html
<template>
<div>
<el-table :data="tableData" show-header="false">
<el-table-column type="selection" :show-checkbox="true" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="age" label="年龄" />
<el-table-column prop="address" label="地址" />
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京' },
{ name: '李四', age: 20, address: '上海' },
{ name: '王五', age: 22, address: '广州' },
],
};
},
};
</script>
```
这样就可以隐藏表头中的复选框了。
相关问题
el-table 隐藏复选框表头
如果你想在 `el-table` 中隐藏复选框表头,可以通过设置 `show-header` 属性为 `false` 来实现。代码如下:
```html
<el-table :data="tableData" :show-header="false" v-model="checkedItems">
<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>
```
这样,在表格中只会显示数据行,而不会显示复选框表头。注意,如果你想要选中行时仍然显示复选框,可以将 `show-header` 属性设置为 `true`。
el-table取消复选框
你可以通过设置 `show-checkbox` 属性为 `false` 来取消 `el-table` 组件的复选框。代码示例如下:
```html
<el-table :data="tableData" show-checkbox="false">
<!-- 表格列配置 -->
</el-table>
```
这样就可以隐藏复选框了。注意,这会同时隐藏表头的复选框和每一行的复选框。如果你只想隐藏表头的复选框,可以设置 `header-checkbox-disabled` 属性为 `true`:
```html
<el-table :data="tableData" show-checkbox header-checkbox-disabled>
<!-- 表格列配置 -->
</el-table>
```
希望对你有所帮助!如有更多问题,请继续提问。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)