71.elementUI表格去掉表头

果然还是度娘深入我心!!!

就设置一个属性 完美解决!!!

1.原始表格代码:

<el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column  prop="name" label="姓名"></el-table-column>
      <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
              <el-button type="text" size="small">移除</el-button>
          </template>
    </el-table-column>
  </el-table>
</el-table>

2.添加 :show-header="false"(默认为true)---此时需要去掉操作列的定位 fixed="right"

否则,操作列会错位!!!

<el-table :data="tableData" style="width: 100%" :show-header="false">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column  prop="name" label="姓名"></el-table-column>
      <el-table-column label="操作">
          <template slot-scope="scope">
              <el-button type="text" size="small">移除</el-button>
          </template>
    </el-table-column>
  </el-table>
</el-table>

### 如何在 ElementUI `el-table` 中去掉表头分割线样式 为了去除 `el-table` 组件中的表头分割线,可以通过自定义 CSS 来覆盖默认样式。具体方法如下: #### 方法一:全局修改 如果希望在整个项目中统一去除所有表格表头分割线,可以在项目的公共样式文件(如 `style.css` 或 `app.scss`)中加入以下代码[^1]。 ```css .el-table th.is-leaf { border-bottom: none; } ``` 此段代码通过选择器 `.el-table th.is-leaf` 定位到所有的表头单元格,并移除了其底部边框属性,从而实现了隐藏表头下划线的效果。 #### 方法二:局部作用域内修改 当只需要针对特定页面或组件内的某个表格实例应用该效果时,则可以采用更精确的选择器来限定范围。假设目标表格有一个类名为`.custom-table`,那么对应的CSS应该这样写: ```css .custom-table >>> .el-table th.is-leaf{ border-bottom:none !important; } ``` 这里使用了深嵌套操作符(`>>>`)以确保样式能够穿透 Vue 的 scoped 样式机制并生效于子元素上;同时加上 `!important` 关键字是为了提高优先级,防止被其他样式覆盖。 另外需要注意的是,在某些情况下可能还需要调整相邻列之间的垂直分隔线,此时可进一步补充如下规则: ```css .custom-table >>> .el-table td, .custom-table >>> .el-table th { border-right: none!important; } ``` 以上方式不仅去掉了水平方向上的表头底部分割线,同时也消除了竖直方向上的间隔线条,使得整个头部区域看起来更加简洁明了[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值