元素 UI：在排序插入符号单击时发出事件答案

【问题标题】：Element UI: Emitting an event on sort caret click元素 UI：在排序插入符号单击时发出事件
【发布时间】：2019-02-07 21:18:00
【问题描述】：

当在带有可排序列的table 上单击排序插入符号时，有什么方法可以发出事件（最好使用与标题单击相同的参数）？

我可以通过单击任何可排序列的标题（标题单击）来发出事件，但单击排序插入符号时没有任何反应。

【问题讨论】：

请提供更多详情

标签： javascript vue.js vuejs2 element-ui

【解决方案1】：

我可以通过单击任何可排序列的标题来发出事件（标题单击），但单击排序插入符号时没有任何反应。

这是预期的行为，您似乎处于sort-change 事件之后，该事件会在表格的排序更改时触发：

<template>
  <el-table @sort-change="sortChange" @header-click="headerClick" :data="tableData" :default-sort="{prop: 'date', order: 'descending'}" style="width: 100%">
    <el-table-column prop="date" label="Date" sortable width="180">
    </el-table-column>
    <el-table-column prop="name" label="Name" sortable width="180">
    </el-table-column>
    <el-table-column prop="address" label="Address" sortable :formatter="formatter">
    </el-table-column>
  </el-table>
</template>



<script>
export default {
 data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        },
        //...
       ]
      }
    },
    methods: {
      sortChange(sortProps){
          this.headerClick(sortProps.column,event) //optional: trigger header-click event
      },
      headerClick(column, event){
        console.log("Header clicked: " + JSON.stringify(column))
      }
    }
}
</script>

Demo

【讨论】：

谢谢。我的情况有点独特，因为我想对单击标题/插入符号和发生排序之间的数据进行一些处理，不幸的是，这意味着排序更改对我来说并不是真正有用。我最终只使用 JS + Vue 进行排序，而不是 Element UI。