el-table 表格自带全选按钮隐藏
    		       		warning:
    		            这篇文章距离上次修改已过441天,其中的内容可能已经有所变动。
    		        
        		                
                在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>标签中定义了该类名的样式来隐藏全选按钮。
评论已关闭