他のライブラリは使わずに、
el-tableでソートボタンorヘッダーカラムがクリックされたときに、
クリックしたところでソートされたAPIを呼び出したい。
数が増えすぎてしまうため、
別に作られたページネーションが、
表示しているページの中限定でソートし表示していた。
だがそれだと全件でソートすることができない。
以下ソースは一旦ページネーションの部分は消し、
全件呼び出し中にソート機能を実装したもの。
ソートボタンorヘッダーカラムのクリックで
APIが再読み込みされるところまではできた。
ここからどうすればいいのか悩んでいる。
該当のソースコード
vue
1 <el-table @sort-change="sortChange" @header-click="headerClick" 2 :data="this.tableData" :default-sort="{prop: 'date', order: 'descending'}" 3 class="table-striped border"> 4 5 <el-table-column 6 v-for="column in tableColumns" 7 :key="column.label" 8 :min-width="column.minWidth" 9 :prop="column.prop" 10 :label="column.label" 11 sortable 12 :formatter="columnValueFormatter"></el-table-column> 13 14 data() { 15 return { 16 tableData: [], 17 tableColumns: [ 18 { 19 prop: "formatted_datetime", 20 label: "日時", 21 minWidth: 100 22 }, 23 { 24 prop: "operation", 25 label: "行動", 26 minWidth: 100 27 }, 28 { 29 prop: "status", 30 label: "結果", 31 minWidth: 100 32 }, 33 { 34 prop: "username", 35 label: "ユーザー", 36 minWidth: 100 37 }], 38 condition:[{ 39 page:1, 40 }, 41 { 42 pageCount:1, 43 }] 44 45 46 computed: {} 47 methods: { 48 sortChange(sortProps){ 49 this.headerClick(sortProps.column,event) 50 }, 51 headerClick(column, event){ 52 console.log("Header clicked: " + JSON.stringify(column)) 53 this.apiGet() 54 }, 55 56 57 58
試したこと
ソート・ヘッダーのクリックイベントを記載し押すたびにAPIの再読み込みができるようになった程度。
全テータを取得してVueの中でソートしてからテーブルに表示する場合データ数が多くなるほど重くなるため、API側でソートしてN件ずつ返却するようにした方がよいですね。
あなたの回答
tips
プレビュー