el-table中自带复选框修改图标样式

### 自定义 `el-table` 中复选框图标的样式 为了实现自定义 `el-table` 组件中复选框的图标样式，可以通过覆盖默认样式的 CSS 类来完成。具体来说，在 Vue 项目中可以利用 scoped 样式或者全局样式表来进行定制。 对于 Element Plus 的 `el-table-column` 使用 type="selection" 创建的选择列，默认情况下会渲染标准的复选框控件。如果想要更改这些复选框的表现形式，则需要通过以下方式： #### 方法一：使用自定义插槽替换原有复选框 ```html <template> <el-table :data="tableData"> <!-- 定义带有作用域插槽的 selection 列 --> <el-table-column type="selection" width="55"> <template slot-scope="{row}"> <span @click.stop="handleSelectChange(row)"> <!-- 替换成自己的 icon 或者其他 HTML 结构 --> <i v-if="isSelected(row)" class="custom-icon custom-checked"></i> <i v-else class="custom-icon custom-unchecked"></i> </span> </template> </el-table-column> ... 其他列 ... </el-table> </template> <script setup> import { ref } from 'vue'; const tableData = [ /* 数据 */ ]; // 记录已选择的数据行 ID 集合 let selectedIds = new Set(); function isSelected(row){ return selectedIds.has(row.id); } function handleSelectChange(row){ const id = row.id; if(selectedIds.has(id)){ selectedIds.delete(id); // 如果已经存在则移除 } else { selectedIds.add(id); // 否则添加进去 } } </script> <style lang="scss" scoped> .custom-icon{ display: inline-block; font-size: 18px; &.custom-checked::before{ content:"\e60a";/* 假设这是个 Unicode 字符代表打勾*/ color:green; } &.custom-unchecked::before{ content:""; border:1px solid gray; padding:.2em; box-sizing:border-box; } } </style> ``` 这种方法允许完全控制复选框的行为和外观，并且能够轻松集成到现有的逻辑当中去[^1]。 #### 方法二：仅改变现有复选框样式而不重写其行为 如果不希望重新编写点击事件处理程序以及管理状态的过程，而是简单地调整原生复选框的样子，那么可以直接针对 `.el-checkbox__inner` 和关联的状态类名应用新的样式规则: ```css .el-table .el-checkbox__input.is-checked+.el-checkbox__label, .el-table th:first-child .cell>.el-checkbox__inner{ background-color:#fff !important; border-color:#dcdfe6!important; } .el-table td:first-child .cell>.el-checkbox__inner.is-indeterminate, .el-table td:first-child .cell>.el-checkbox__inner.is-checked{ background-color:red !important;/* 改变背景颜色 */ border-color:red !important; } /* 更改未选中的 checkbox 外观 */ .el-table td:first-child .cell>.el-checkbox__inner:not(.is-checked), .el-table th:first-child .cell>.el-checkbox__inner:not(:hover):not(.is-focus){ border-radius:50%; /* 圆形边角 */ height:16px;width:16px;line-height:14px;text-align:center; &:after{/* 添加对号标记 */ position:absolute;top:3px;left:7px; content:'✓'; transition:transform .1s ease-in-out; transform-origin:center center; transform:scale(0); } } /* 当被选中时显示对号 */ .el-table td:first-child .cell>.el-checkbox__inner.is-checked:after{ transform:scale(1); } ``` 此方案适用于只需要轻微改动视觉效果而不需要深入干预交互流程的情况。需要注意的是，由于某些属性可能受到框架内部设置的影响，因此有时不得不借助于 `!important` 来强制生效新样式[^2]。