el-table替换图标

### 自定义或替换 Element UI `el-table` 默认图标 在 Element UI 的 `el-table` 组件中，可以通过多种方式实现图标的自定义或替换。以下是具体方法： #### 使用 `slot-scope` 和 `v-if` 通过使用 `el-table-column` 的 `slot-scope` 属性可以访问当前行的数据，并根据特定条件渲染不同的图标。 ```html <template> <el-table :data="tableData"> <el-table-column prop="value" label="Value"> <template slot-scope="scope"> <span>{{ scope.row.value }}</span> <i v-if="scope.row.value === 1" class="el-icon-check custom-icon"></i> <!-- 替换成自定义类名 --> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { value: 0 }, { value: 1 } ] }; } }; </script> <style scoped> .custom-icon { color: green; } </style> ``` 此代码展示了如何基于单元格中的值有条件地显示不同样式或类型的图标[^2]。 #### 定义全局 CSS 类覆盖默认图标 如果希望统一修改整个应用内的某些图标样式，可以在项目根目录下的公共样式文件（如 `assets/css/global.css` 或者 `<style>` 标签内）定义新的 CSS 类来替代原有图标。 ```css /* 覆盖原有的箭头图标 */ .el-table .caret-wrapper .sort-caret.ascending::before, .el-table .caret-wrapper .descending::after { border-color: transparent transparent red; /* 修改颜色或其他属性 */ } /* 添加新图标到操作按钮 */ .el-button--text svg { fill: currentColor; width: 1em; height: 1em; } ``` 这些规则会作用于所有匹配的选择器实例上，从而达到批量更新的效果[^1]。 #### 利用组件库提供的 API 进行动态设置 部分版本的 Element Plus 提供了更灵活的方式来进行个性化定制，比如利用其内置的方法动态调整列配置项里的 icon 字段等参数。 ```javascript // 假设有一个函数用于获取最新的列定义列表 const getColumnsConfig = () => ({ columns: [{ type: 'selection', align: 'center' }, { label: '日期', property: 'date', sortable: true, filters: [{ text: '2016-05-01', value: '2016-05-01' }], filterMethod (filterVal, row) { return row.date.indexOf(filterVal) !== -1; }, ...this.$createElement('svg', { attrs: { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, style: { marginRight: '-8px', marginLeft: 'auto', display: 'block' } }) }] }); ``` 这段 JavaScript 片段展示了一个可能的方式来创建 SVG 图标并通过编程手段将其嵌入到表格列配置当中去。