いきなり実装
index.html
<head>
<meta charset="UTF-8">
<script src="lib/vue.js"></script>
<script defer src="tet.js"></script>
<title>VueTable</title>
</head>
<body>
<div id="app">
<table border>
<tr>
<th v-for="h in tableHeader" v-bind:name="h.id">{{h.text}}</th>
</tr>
<tr v-for="d in tableData">
<td v-for="h in tableHeader" v-bind:name="h.id">{{d[h.id]}}</td>
</tr>
</table>
</div>
</body>
tet.js
var app = new Vue({
el: '#app',
data: {
tableHeader: [
{ "id": "id", "text": "ID" },
{ "id": "name", "text": "商品名" },
{ "id": "fee", "text": "値段" }
],
tableData: [
{ "id": "012", "name": "たこ焼き", "fee": "150" },
{ "id": "023", "name": "わたあめ", "fee": "100" },
{ "id": "034", "name": "りんご飴", "fee": "120" }
]
}
})
output
<body>
<div id="app">
<table border="">
<tbody>
<tr>
<th name="id">ID</th>
<th name="name">商品名</th>
<th name="fee">値段</th>
</tr>
<tr>
<td name="id">012</td>
<td name="name">たこ焼き</td>
<td name="fee">150</td>
</tr>
<tr>
<td name="id">023</td>
<td name="name">わたあめ</td>
<td name="fee">100</td>
</tr>
<tr>
<td name="id">034</td>
<td name="name">りんご飴</td>
<td name="fee">120</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
※イメージ
| ID | 商品名 | 値段 |
|---|---|---|
| 012 | たこ焼き | 150 |
| 023 | わたあめ | 100 |
| 034 | りんご飴 | 120 |
説明
不要だと思うけど。
データ出力部分は、
行毎ループがv-for="d in tableData"
列毎ループがv-for="h in tableHeader"
でやってる。
おミソは、tableHeaderを配列にしたので、列の入れかえが死ぬほどかんたん。
tet.js@順番入れ替え
tableHeader: [
{ "id": "name", "text": "商品名" },
{ "id": "fee", "text": "値段" },
{ "id": "id", "text": "ID" },
],
のように、配列内で順番を変えれば列位置も変えられる(だからなんだという感じはなくはない。)
単位もつけてみたいにぇ。
index.html@単位対応
<td v-for="h in tableHeader" v-bind:name="h.id">{{d[h.id]}}{{unitName[h.id]}}</td>
tet.js@単位対応
unitName: { "fee": "円" }
@順番入れ替えと@単位対応を行った結果※イメージ
| 商品名 | 値段 | ID |
|---|---|---|
| たこ焼き | 150円 | 012 |
| わたあめ | 100円 | 023 |
| りんご飴 | 120円 | 034 |
いぇい
今後に向けて
- テーブルの編集機能作りたい
- 表示機能と共存させると重くなりそうだけど、テーブル内容の編集・保存機能をつけたい
- editableにしたり、編集した後の
tableDataのJSONを保存したりしたい。- サーバー側のを保存する機能は、サーバーサイドをがっちりしないとダメだろうから、いったん保留
- 属性もいじいじしたい
- テーブルの幅だの、alignだのだっていじいじしたい。
-
tableAttribとか作ってHeader.idで紐付けた配列にいろいろ持たせたやつを、JavaScriptで後からAddしてあげる感じか-
"tableAttrib":{"id":[{"align":"center"},{"width":"50"}],"name":[],"fee":[]}-
align属性はdeprecatedなのでまた別の方法かもしらん - つか、
thとtd指定のname指定(上記ならば)で、CSSでキメればいいのか - でも、WebStormくんが「
name属性使うなってVue3.0がサジェストしとるで」って言うから、それもなんか違うのかしらん
-
-
そんなところです。