teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

質問追加

2019/10/07 09:21

投稿

shoshi
shoshi

スコア18

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,8 @@
1
1
  ### 前提・実現したいこと
2
2
  ページネーションやソートはできました。
3
3
  テーブルにスロット?でボタンアクションを追加する方法がわかりません。
4
+ あとこれで表示されるときに左上に入力フィルターもついてくるんですが、
5
+ これを非表示にする方法もわかりません。
4
6
 
5
7
  ### 該当のソースコード
6
8
 

1

質問の変更

2019/10/07 09:21

投稿

shoshi
shoshi

スコア18

title CHANGED
@@ -1,1 +1,1 @@
1
- vue apiから受けとった情報をテーブルに表示し、ページネーションを作成したが、表示るページ内ソートができない。
1
+ vue-table2のテーブルでボタンを表示するセルを作るにはどうす
body CHANGED
@@ -1,57 +1,26 @@
1
1
  ### 前提・実現したいこと
2
- ページネーションや表示件数に関係なく
2
+ ページネーションやソートはできました。
3
- テーブルカラムをクリクしたらソートでようにしたい
3
+ テーブルにスロットボタンアクションを追加す方法がわかりません
4
4
 
5
- ### 発生している問題・エラメッセ
5
+ ### 該当のソスコ
6
6
 
7
- ```
7
+ ```vue
8
+ <v-client-table :columns="this.tableColumns2" :data="this.tableData" :options="options" >
8
- 現在ページに表示されているページ内のアイテムでしかソートすることができない。
9
+ </v-client-table>
9
- ```
10
10
 
11
- ### 該当のソースコード
12
- queriedData
13
11
 
14
12
 
15
- <div class="d-flex justify-content-between mt-4">
16
- <div class="d-flex">
17
- <div class="search-label">表示件数</div>
18
- <el-select class="select-default" v-model="pagination.perPage" placeholder="Per page">
13
+ tableColumns2: ["formatted_datetime","operation","status","username"],
19
- <el-option
14
+ options:{
15
+ headings:{
20
- class="select-default"
16
+ formatted_datetime:'日時',
21
- v-for="item in pagination.perPageOptions"
22
- :key="item"
23
- :label="item"
17
+ operation:'行動',
24
- :value="item"
18
+ status:'結果',
25
- ></el-option>
19
+ username:'ユーザー'
26
- </el-select>
20
+ }},
27
21
 
28
22
 
29
- <el-table :data="queriedData" class="table-striped border">
30
- <el-table-column
31
- v-for="column in tableColumns"
32
- :key="column.label"
33
- :min-width="column.minWidth"
34
- :prop="column.prop"
35
- :label="column.label"
36
- sortable=
37
- :formatter="columnValueFormatter"></el-table-column>
38
-
39
- <el-table-column :min-width="120" label="詳細">
40
- <template slot-scope="props">
41
- <div class="text-center">
42
- <!-- フィルター -->
43
- <p-button
44
- type="default"
45
- @click.native="showOperationLogListModal( props.$index, props.row )">
46
- 詳細
47
- </p-button>
48
- </div>
49
- </template>
50
- </el-table-column>
51
- </el-table>
52
- ```vue
53
23
 
54
24
  ```
55
-
56
25
  ### 試したこと
57
- tableカラムに@onclickイベントやsortableつけたが変わらなかった。
26
+ tableカラムに@onclickイベントをつけたが変わらなかった。