うしろのこの本ください

なんでもかきます

Element の el-table-column に任意の要素を突っ込む方法

element ui の el-table にアイコンを表示したくて色々試した結果、死ぬほど時間を浪費したのでメモ残す。

こういうやつ

<el-table :data="filteredList" max-height="960">
  <el-table-column label="カード">
  </el-table-column>
  <el-table-column label="インターバル" prop="skill[0].interval">
  </el-table-column>
  <el-table-column label="スキル秒数" prop="skill[0].duration">
  </el-table-column>
  <el-table-column label="効果量" prop="skill[0].value">
  </el-table-column>
</el-table>

ミリシタのカードデータを使ってごにょごにょやろうと思ってたんだけど、このカードの部分でアイコン出したくなった。最初にそれっぽい issue を見つけたのでそれを頼りに頑張ったのがだめだった。

github.com

この issue にあるように slot-scope を使ってカラムに任意の要素を流し込むことが出来る。

jp.vuejs.org

<el-table :data="filteredList" max-height="960">
  <el-table-column label="カード">
    <template slot-scope="scope">
      <img :src="scope.resourceId" />
    </template>
  </el-table-column>
  <el-table-column label="インターバル" prop="skill[0].interval">
  </el-table-column>
  <el-table-column label="スキル秒数" prop="skill[0].duration">
  </el-table-column>
  <el-table-column label="効果量" prop="skill[0].value">
  </el-table-column>
</el-table>

resourceId にはその画像の url が入っていると思ってよい。ここも最初は動的にパスを変える方法を模索していて background-image にしてみたりもしたけど、結局 img の src属性を動的に変えるのに落ち着いた。

しかし、これだけでは動かない。なんで! issue にある通りに書いたのに!この後3時間程詰まってキレかけたが、神stackoverflowが見つかり事なきを得た。

stackoverflow.com

つまり、row が抜けているだけだった。

<el-table :data="filteredList" max-height="960">
  <el-table-column label="カード">
    <template slot-scope="scope">
      <img :src="scope.row.resourceId" />
    </template>
  </el-table-column>
  <el-table-column label="インターバル" prop="skill[0].interval">
  </el-table-column>
  <el-table-column label="スキル秒数" prop="skill[0].duration">
  </el-table-column>
  <el-table-column label="効果量" prop="skill[0].value">
  </el-table-column>
</el-table>

これで結果はこうなる

f:id:apple19940820:20190102044147p:plain

この結果に辿り着く前に、el-table-column が持つ formatter 属性でなんとかパース出来ないか試した時に実は row の存在には気づいていた。

<el-table-column label="カード" prop="resourceId" :formatter="formatter">
</el-table-column>

methods: {
  formatter(row, column) {
    return return '<img src="' + row.resourceId+ '">'
  }
}

なんかこんな感じで img 差し込めないかなとか思った。結果は文字列としてタグが表示されるだけだったけど。あと createElement('img') を返してみたけどだめでした。

この時点で気づけていれば2時間くらい無駄にせずに済んだな。つれぇ

頑張った成果ここだいぶ進んだから良し

github.com

おわり