element 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 :data="tableData" style="width: 100%">

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

</el-table>
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

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

Answer 4

    tableData [{
      nameVariable: 'irene'
    }]
    

name 改成 nameVariable

Answer 5

这个是可以用的哦，看例子https://jsfiddle.net/stardew/...

Answer 6

<el-table-column :prop="'name'"></el-table-column>
<el-table-column prop="name">{{ nameVariable }}</el-table-column>

分别测试，快速排错