el-table sortable 点击范围自定义

`el-table` 是 Element UI 提供的一个用于展示表格数据的组件，在 Vue.js 中非常常用。当启用 `sortable` 属性时，你可以对表格列进行排序，通过设置 `sort-method` 和 `formatter` 函数来自定义排序和显示内容。

如果你想自定义点击范围，即点击列头时触发的操作区域，可以不直接操作 `sortable`，而是利用 `header-cell-click-event` 或者监听单元格的点击事件 (`cell-click-event`)。例如，你可以在这个事件中添加自定义逻辑来控制哪些部分可以被点击并执行排序。

<template>
  <el-table :data="tableData" :sort-method="customSortMethod">
    <el-table-column type="index" width="50"></el-table-column>
    <!-- ...其他列... -->
    <el-table-column header-align="center" align="right"
                     :header-cell-click-event="handleHeaderClick">
      <template slot-scope="scope">
        <span v-if="isSortable">点击排序</span>
        <!-- ...其他单元格内容... -->
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...],
      isSortable: true,
    };
  },
  methods: {
    customSortMethod(column, dir) {
      // 自定义排序逻辑...
    },
    handleHeaderClick({ column, event }) {
      if (!this.isSortable || !event.target.matches('.sortable')) {
        // 阻止默认行为或执行其他自定义操作
      } else {
        this.customSortMethod(column, 'asc'); // 示例：升序排序
      }
    },
  },
};
</script>

在这个例子中，`isSortable` 控制列是否允许排序，`handleHeaderClick` 事件处理函数会检查是否应该执行排序操作。可以根据需要调整这个逻辑，并通过 CSS 来定制点击区域的样式。