el-table如何解决在表头加入按钮同时不影响排序按钮

在Element UI的`el-table`组件中，如果你需要在表头添加自定义按钮而不影响默认的排序功能，可以采用以下策略：

1. **使用`custom-header-cell`属性**：这个属性允许你在每一行的表头单元格内放置任意HTML元素，包括按钮。你可以通过监听`header-click`事件来控制按钮的行为，然后手动处理排序逻辑。

<template>
  <el-table
    :data="tableData"
    :sort-method="customSort"
    @header-click="handleHeaderClick">
    <el-table-column type="index" label="#" width="50"></el-table-column>
    <template #default="{ column, $index }">
      <template v-if="!column.sortable">
        <!-- 自定义表头单元格内容 -->
        <div class="custom-header">
          <button @click="handleCustomButtonClick($index)">自定义按钮</button>
          <span>{{ column.label }}</span>
        </div>
      </template>
      <template v-else>
        <el-table-column :label="column.label" :key="$index" :sortable="true">
          <template slot-scope="scope">{{ scope.row[column.property] }}</template>
        </el-table-column>
      </template>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: ...,
      customSort: this.customSortHandler
    };
  },
  methods: {
    handleCustomButtonClick(index) {
      // 对自定义按钮的点击操作
    },
    customSortHandler(column, direction) {
      // 实现自定义排序逻辑，这里不直接触发排序，而是根据需要自行处理
    },
    handleHeaderClick({ column, event }) {
      if (event.type === 'click') { // 判断是否是点击事件
        // 如果是自定义按钮，不执行排序
        if (column.renderedHeader.includes('自定义按钮')) {
          return;
        }
        // 否则执行正常的排序
        this.$refs.table.handleSort(column);
      }
    }
  }
};
</script>

在这个例子中，你需要确保在表头的`renderedHeader`包含“自定义按钮”的标识，以便在`handleHeaderClick`里区分点击的是普通列还是自定义列。