el-table__expanded-icon content

### 关于 `el-table__expanded-icon` 样式的自定义 在 Element-UI 中，`el-table` 组件支持树形结构的数据展示以及行展开功能。对于 `el-table__expanded-icon` 的样式自定义，可以通过覆盖默认的 CSS 类来实现。 #### 隐藏默认图标并替换为自定义图片 如果希望隐藏默认的展开图标并将自定义图片作为新的图标显示，可以按照以下方式操作： ```css /* 隐藏默认的展开图标 */ .el-table__expand-icon > .el-icon { display: none !important; } /* 替换为自定义图片 */ .el-table__expand-icon { content: url('自定义图片路径') !important; } ``` 此方法适用于需要完全替换默认图标的场景[^1]。 --- #### 使用 IconFont 图标替代默认图标 当需要使用字体图标（如 IconFont）代替默认图标时，可以通过修改伪元素的内容属性完成： ```css /deep/ .el-table__expand-icon { font-family: iconfont !important; /* 设置字体库 */ font-size: 14px; /* 调整大小 */ } /deep/ .el-table__expand-icon:before { content: "\e637"; /* 定义具体的 Unicode 字符 */ } ``` 通过这种方式，可以灵活调整图标的外观和行为[^2]。 --- #### 动态切换展开状态下的图标 为了区分折叠与展开两种状态，可以在不同的状态下应用不同的样式： ```css /* 默认未展开状态 */ /deep/ .el-table__expand-icon { background: url('./images/folder.png') no-repeat 0 3px; content: ''; display: block; width: 16px; height: 16px; background-size: cover; } /* 已展开状态 */ /deep/ .el-table__expand-icon--expanded { background: url('./images/folderOpen2.png') no-repeat 0 3px; content: ''; display: block; width: 15px; height: 20px; background-size: cover; } ``` 以上代码片段展示了如何动态更改不同状态下的图标样式[^3]。 --- #### Vue Scoped 样式穿透注意事项 由于 Vue 单文件组件中的 `<style scoped>` 属性会限制样式的范围，因此需要借助 `/deep/` 或 `>>>` 来穿透作用域限制。例如： ```css <style scoped> /deep/ .el-table__expand-icon { /* 自定义样式 */ } </style> ``` 需要注意的是，在某些版本的 Vue CLI 中，可能需要用 `>>>` 取代 `/deep/`。 --- #### 示例代码 以下是完整的示例代码，用于演示如何自定义 `el-table__expanded-icon` 样式： ```html <template> <el-table :data="tableData" style="width: 100%" row-key="id"> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </template> <style scoped> /* 隐藏默认图标 */ /deep/ .el-table__expand-icon > .el-icon { display: none !important; } /* 添加自定义图片 */ /deep/ .el-table__expand-icon { content: url('https://example.com/custom-icon.png') !important; } /* 已展开状态 */ /deep/ .el-table__expand-icon--expanded { content: url('https://example.com/custom-expanded-icon.png') !important; } </style> ``` ---