el-table点击其他按钮取消 sortable 的选中

在Element UI的el-table组件中，如果你想通过点击其他按钮取消当前列的sortable（排序）选中状态，你可以利用table的事件处理机制以及表头单元格（th）的自定义属性。首先，你需要给每个表头单元格添加一个ref属性，并绑定了一个取消排序的函数，比如`cancelSort`。当用户点击其他按钮时，可以触发这个函数。

以下是一个简单的示例：

<template>
  <el-table ref="table" :data="tableData" @click.native="handleOtherButtonClick">
    <!-- ... -->
    <el-th v-for="(column, index) in columns" :key="index"
           :sortable="true"
           :ref="'thead_' + index'"
           @click="toggleSortable(index)">
      {{ column.label }}
      <span class="sort-icon" slot-scope="{ $index }">
        <i :class="{'arrow-up': sortOrders[$index] === 'asc', 'arrow-down': sortOrders[$index] === 'desc'}"></i>
      </span>
      <!-- 其他按钮 -->
      <button @click="cancelSort($index)">取消排序</button>
    </el-th>
    <!-- ... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...],
      columns: [...],
      sortOrders: {} // 存储当前列的排序状态
    };
  },
  methods: {
    toggleSortable(index) {
      if (this.sortOrders[index]) {
        this.sortOrders[index] = this.sortOrders[index] === 'asc' ? 'desc' : 'asc';
      } else {
        this.sortOrders[index] = 'asc'; // 默认排序为升序
      }
    },
    cancelSort(index) {
      this.sortOrders[index] = null; // 取消排序则设置为null
    },
    handleOtherButtonClick(e) {
      // 确定是否点击的是表头以外的部分，如果是，则调用cancelSort
      if (!e.target.matches('.el-table th')) {
        this.cancelSort(e.target.dataset.index); // 使用dataset传递列索引
      }
    }
  }
};
</script>

在这个例子中，`handleOtherButtonClick`会在非表头元素点击时检查目标元素，并调用相应的`cancelSort`方法。注意这里假设你已经在数据上存储了列的初始排序状态，并使用`@click.native`来捕获整个表格区域的点击事件。