javascript - 元素 ui

Question

<el-table :data="tableData">
  <el-table-column prop="name"></el-table-column>
</el-table>

tableData [{
  name: 'irene'
}]

nameVariable是一個變量，value等於'name', 當我將列改為<el-table-column :prop="nameVariable"></el-table-column>時，資料就不顯示了，這是為何？

Answer 1

這個元件的原理是這樣的
:data相當於變數
prop相當於變數的鍵
prop一定是:data變數的鍵哦
所以你這個應該是呼叫問題，prop不能呼叫其他變數

Answer 2

這個問題看下官網的demo

<el-table-column prop="date" label="日期" width="180"></el-table-column>

export default {

    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                }]
                }
            }
          }
官网demo提示，prop后面跟的数据是colum中的key值，而且没有使用v-bind:prop。
你可以把列改为<el-table-column prop="nameVariable"></el-table-column>
然后对应的data数据中，将列的key值也改成nameVariable。那么数据就可以显示了

Answer 3

你上面改了，下面也要改吧