<el-table-column>のラベルにボタン(クリックイベント)を作成したい

Question

実現したいこと

テーブルのラベルのクリックイベントからmethodに引数を引き渡したいです。

下のような感じです...

追記（10月3日）

今回、vueで使えるElement uiのsort機能が使えなく失敗してしまいました。
考えられる原因を「試したこと」に書きました
(https://element.eleme.io/#/en-US/component/table#sorting)

###試したこと

ラベルのクリックイベントからmethodに引数を引き渡したいです。

vueの公式サイトなどで調べましたが、そもそもできるのか、できないのかが分からなかったので、ここで質問させていただきました。

追記（10月３日）
アドバイスいただきelementのページで調べて見ました。(大変勉強になりました)
(https://element.eleme.io/#/en-US/component/table#sorting)

しかしうまく行きませんでした。考えられる原因として、公式ページではテーブルをdata、propを使って表示していますが、自分の場合jsを使って表示しています（下記のコードの<template>部分です。）。

試したコード

ラベルのクリックイベントからmethodに引数を引き渡したいです。

//elmentの公式ページを参考に書いたコード
<el-table-column
label="age"
min-width="40"
sortable
:sort-method="sortfunc('')">　　//sortfuncは自分でテーブルをソートする関数です。
<template scope="scope">
<span style="font-size:16px">{{"ここでjsから持って来たデータ"}}</span>
</template>
</el-table-column>

//自分でなんとなく書いたコード
<el-table-column
label="age"
min-width="40"
@click.native="sortfunc('')">
<template scope="scope">
<span style="font-size:16px">{{"ここでjsから持って来たデータ"}}</span>
</template>
</el-table-column>

Answer 1

やりたいことはこのような形でしょうか？
https://codepen.io/y-ogura/pen/bzwVqB
私もdata.key.lengthなどで値を表示したかったのでクリックイベントでsortが動くようなコードが欲しくて実装してみました。
sortableをel-table-columnに付けずにheaderをクリックした際にメソッドが走ってel-tableのdataに渡している値がsortされるようにしています。
this.sortData.sortの中のifの条件を書き換えたり等すればネストの深い連想配列などにも対応できるようになるのではと思います。

<template>
  <el-table
    :data="order === 0 ? tableData : sortData"
    :default-sort="{prop: 'date', order: 'descending'}"
    style="width: 100%"
  >
    <el-table-column sortable width="180">
      <template slot="header" slot-scope="scope">
        <div @click="sortByKey('date')">Date</div>
      </template>
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
...
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-03'
      }, {
        date: '2016-05-02'
      }, {
        date: '2016-05-04'
      }, {
        date: '2016-05-01'
      }],
      order: 0,
      sortData: []
    }
  },
  methods: {
    sortByKey (key) {
      	if (this.order != 2) {
        	this.order++
				} else {
        	this.order = 0
        }
        this.sortData = Object.assign([], this.tableData)
        if (this.order != 0) {
        	this.sortData.sort((a, b) => {
            const order = this.order === 1 ? 1 : -1
            if (a[key] < b[key]) return order
            if (a[key] > b[key]) return order * -1
          })
        }
      }
    }
  }
}
</script>

Answer 2

el-table-column ということは Element UI を使用していると思うので（違ったらごめんなさい）、Vue の公式ではなく Element UI の公式サイトの table の sort を参考にすればできると思います。

Comments

[退会済みユーザー]

ありがとうございます！調べて見ます！

[fuuki]

試したコードを見る限り、Elementui の table は見た目のみで使用し、内部のデータの保持やメソッドは自分で用意しているので、動くように見えます。

sortfunc や data の持ち方が書かれていないのですが、ソートメソッドが動いた前後でデータの順番は変わっていますでしょうか。
もしくは、エラーコードなどがわかると嬉しいです。