前回、DatGuiをBackEnd APIを検証するための登録画面に利用している。って記事を記載した。がだれからも良いねはなくLGTMも来なくて内心ビビってる。マジか。と思った。というかツイッターのフォロワーは未だ増えないままだ。この現状を見てInputMaskをぶっこんだ話なんかも展開する予定だったがやめた。そしてQiitaフォントサイズ大きいなってことで自分でブログを作ろうと思った。プロトタイプはあるし順調だ。だからその話もメモ代わりにQiitaで展開していくつもりだ。そこで動作するサンプルなんかも公開しよう。その間の記事はQiitaにメモ代わりで投稿することにした。
1.前提
趣味で何かを開発していたら、テーブルの列が後から増えてくる（登録する項目なんか）ってのはよくある話だ。少なくとも自分の間じゃそうだ。最初のプロトタイプを作るときは名前なんて姓だけで十分だしあとIDとPASSの３項目でテーブル作って社員登録機能を作る。みたいな最小限の構成で組み始めている。できた次に社員名いっとくか。メールアドレスいっとくか。みたいに項目を増やしていく。（機能が出来たら次のデータを作る。棚田だ）
2.問題
ここで起きてくる問題はCSSだ。今や<tag>の中にstyleをぶっこむなんて真似も全くしてこなかった俺だが、このような作り方の前では後から項目が増えるからID指定やCLASS指定でやろうと面倒くさくなってくる。nth-child(n)で最初は指定していたが列間の途中に項目を増やす状況になると、配列途中に値を挿入するみたいに以降の全番号を手で振りなおすという愚かさだ。面倒くさい（姓と名は左寄せのほうがいいな）
tabletrtd:nth-child(1){width:6em;text-align:center;}tabletrtd.employee-name{width:6wm;text-align:center;}tabletrtd#employee-name{width:6em;text-align:center;}tabletrtd[data=employee_name]{width:6em;text-align:center;}3.結局
タグの中に書き込んだ方が一番手っ取り早い。という結論に至った。周りはどうかな？どうやってるか知りたい。だが、なぜ毎回widthやtext-alignを打ち込まなくちゃならないんだ？面倒くさい。APIを検証するためのこの画面ではテーブルの項目は永遠と増え続ける。テーブル自体もだ。そのたびに書くのは面倒だ。その間の時間を省いてチロルチョコを食べた方がいい。健康的な考えだ。
<table><tr><tdstyle='width:6em;text-align:center;'></td></tr></table>4.ということでディレクティブを作った
前置きが長かった。要はセルのtdのwidthとalignを{attribute:value}をvalueの一括指定でDOM作ってくれたら便利だなという話だ。ソースはこれ。
Vue.directive('style',function(el,binding,vnode){vnode.context.$nextTick(function(){vararr=binding.value.split(',')switch(binding.arg){case'align':_.each(el.children,function(el,i){varalign=arr[i]=='l'?'left':arr[i]=='r'?'right':'center'el.classList.add(align)})break;case'width':_.each(el.children,function(el,i){el.style.width=(arr[i]==undefined)?'auto':arr[i]+'em'})break;}})})5.使い方
ディレクティブをかますだけ。<tr>に。列の幅指定はヘッダだけで良く配置指定はボディに組み込んでいるが、確かにv-style:alignは効率的じゃないかもしれない。全セルに指定することになるからループも多い。ここだけCSSにした方がいいかも。どうやるのがベストだと思うか知りたい。ダブルクォートの間にシングルクォートを挟むのはこれ自体を文字列として評価してもらうためだ。
それからこのコードはLODASHに依存している。_.each()のとこだけだ。
<table><thead><trv-style:width="'7,7,7,5,5,5,5,5,5,5,5,5,5,auto'"></tr></thead><tbody><trv-for='v,k,n in list'v-style:align="'c,l,l,c,c,c,c,c,c,c,c,c,c,c'"></tr></tbody></table>