饿了么ui自定义表头内容

工作日常分享:今天有个需求,在表头上家一个?号,还是圆圈中带一个问号

实现方法:饿了么组件库中自带的参数
在这里插入图片描述
使用方法:slot="header"代表着表头,设置表头内容,但是slot-scope="scope"需要加上,否则不会显示,然后再设置列的内容即可

<el-table-column>
  <!-- 自定义表头 -->
   <template slot="header" slot-scope="scope">
         <span>排序  <i class="el-icon-question" ></i></span>
   </template>
   <!-- 当前列内容 -->
   <template  slot-scope="scope">
     <span>{{scope.row.product_sort}}</span>
   </template>
 </el-table-column>

在这里插入图片描述

其他工作日常分享:
统一输入框只能输入数字且不能小于1
使用循环总是拿到最后的值
将参数或者数据当做属性使用
el-form 动态控制rules是否校验
vue 实现只有中评好评差评功能

### 修改 Vue3 Element Plus `el-table` 组件的背景颜色 为了修改 `el-table` 表格组件的背景颜色,在样式设置方面需要注意一些细节,以确保不会引入不必要的副作用,比如右侧出现白色竖线。 #### 方法一:全局覆盖默认样式 可以通过自定义 CSS 类来覆盖默认样式。创建一个新的类名并应用到 `<style>` 或者 `<style scoped>` 中: ```css /* 定义新的CSS规则 */ .custom-table { background-color: #f0f9eb !important; } ``` 然后在模板部分给 `el-table` 添加这个新类: ```html <template> <el-table :data="tableData" class="custom-table"> <!-- 列配置 --> </el-table> </template> ``` 这种方法适用于希望整个页面内所有表格都采用相同风格的情况[^1]。 #### 方法二:局部作用域内的样式调整 如果只需要针对特定实例做更改,则可以在单文件组件 (SFC) 内部使用深度选择器 (`>>>`) 来穿透scoped样式的作用范围: ```scss <style lang="scss" scoped> .el-table >>> .el-table__body-wrapper tr, .el-table >>> .el-table__header-wrapper th { background-color: #eaf7ff !important; } // 如果遇到子元素无法生效的问题, 可能是因为版本差异造成的兼容性问题. // 尝试替换为 ::v-deep 或者 /deep/ 关键字代替 >>> </style> ``` 注意这里不仅改变了主体行的颜色还包含了表头单元格(`th`),这样可以保持视觉一致性。 为了避免上述提到的可能产生的右侧白边现象,建议同时设定 `.el-table::after { display:none; }` ,这会移除默认情况下用于清除浮动而添加的一个伪元素,该伪元素有时会造成显示异常。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值