el-table 表格自带全选按钮隐藏
warning:
这篇文章距离上次修改已过191天,其中的内容可能已经有所变动。
在Element UI中,el-table
组件自带的全选按钮可以通过CSS隐藏。以下是隐藏全选按钮的CSS代码示例:
/* 隐藏Element UI表格全选按钮 */
.el-table__header-wrapper .el-checkbox {
display: none;
}
将上述CSS添加到你的样式表中,即可隐藏掉el-table
的全选按钮。如果你使用的是Vue.js项目,并且是在单文件组件中,可以在<style>
标签中添加上述CSS,或者在全局样式文件中添加。
如果你想要在组件内部直接控制全选按钮的显示,可以使用show-header-overflow
属性控制表头的溢出样式,或者通过自定义表头来实现。
<template>
<el-table
:data="tableData"
show-header-overflow
header-cell-class-name="hide-selection"
>
<!-- 你的表格列定义 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
// ...你的数据
]
};
}
};
</script>
<style scoped>
.hide-selection .el-table__header-wrapper .el-checkbox {
display: none;
}
</style>
在这个例子中,我们使用了header-cell-class-name
属性来为表头的单元格添加一个自定义的类名hide-selection
,然后在<style>
标签中定义了该类名的样式来隐藏全选按钮。
评论已关闭