ElementUIのel-tableのel-columnをv-forで回して配列のデータをセットする

4458 ワード
table ElementUI Vue.js table テキストリンク

概要

vue.jsのライブラリ「ElementUI」において、el-tableを使うときに配列のデータを使いたいときの方法

結論

  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="名前"
        width="180">
      </el-table-column>
      <el-table-column
        v-for="(value, index) in indexes"　　←v-forで繰り返す
        :key="index"
        :prop="`list[${index}]`"　　　　　　　←:propでv-bind:propの意。バッククウォートで文字列結合
        :label="`データ ${index}`"
        width="180">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            name: 'Tom',
            list: [1,2,3,4,5]
          }, {
            name: 'Mike',
            list: [12,13,14,15,16]
          }, {
            name: 'Bob',
            list: [2,3,4,5,6]
          }]
        }
      }
    }
  </script>

出力例

v-bindと「`」が肝です。↓こちらが参考になました。ありがとうございます。
https://uyamazak.hatenablog.com/entry/2018/11/08/160714