el-table排序取消高亮

### 取消 Element UI `el-table` 排序时的默认高亮样式 对于取消 `el-table` 排序时的默认高亮样式，可以采取调整列配置的方法来实现。具体来说，在 `el-table-column` 组件中存在一个名为 `columnConfig.order` 的属性用于控制排序的状态。当此属性被设为空字符串或未定义时，则能够有效移除排序后的高亮效果[^1]。 ```javascript // 假定这是初始化表格列的部分代码片段 const columns = [ { prop: 'name', label: '姓名', sortable: true, columnConfig: { order: '' // 将order置空以清除排序高亮 } }, ... ]; ``` 另外一种方式涉及更深入的操作 CSS 类名机制。如果上述方法未能满足需求，还可以尝试重写 `.is-sorting` 或者其他关联到排序样式的类的选择器，从而达到隐藏或改变原有视觉表现的目的。不过这种方法可能会影响全局样式的一致性，因此需谨慎处理[^2]。 最后值得注意的是，Element UI 提供了一些内置功能帮助开发者更好地管理表格交互行为，比如通过设置 `highlight-current-row` 属性可让某一行处于选中状态并带有特殊标记；然而这与排序操作无直接关系，仅作为额外的信息提供给读者了解整个库的功能范围[^3]。 #### 实现示例 下面给出一段简单的 Vue 单文件组件例子展示如何应用以上提到的技术： ```html <template> <div class="table-container"> <!-- 使用 :default-sort 来指定初始排序 --> <el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange"> <el-table-column v-for="(item, index) in columns" :key="index" :prop="item.prop" :label="item.label" :sortable="item.sortable" :column-config="{ order: item.columnConfig && item.columnConfig.order || null}"> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [...], // 表格数据源 columns: [{ prop: 'date', label: '日期', sortable: false }, { prop: 'name', label: '姓名', sortable: true, columnConfig: { order: '' } }] }; }, methods: { handleSortChange(sortInfo){ console.log('Sorting changed:', sortInfo); this.columns.forEach(col => { if (col.prop === sortInfo.prop) { col.columnConfig.order = sortInfo.order; } else { col.columnConfig.order = ''; } }); } } }; </script> ```