el-table-column循环渲染数据

通常使用el-table-column

我们通常使用el-table-column时会通过el-table的data属性和el-table-column的prop属性完成绑定

    <script>
        export default {
            data(){
                return {
                    tableData:[
                        {
                            id:1,
                            name:'A'
                        },
                        {
                            id:2,
                            name:'B'
                        }
                    ]
                }
            }
        }
    </script>
    <template>
        ...
        <el-table :data='tableData'>
            <el-table-column prop='name' label='姓名'>
            </el-table-column>
        </el-table>
    </template>

当我们数组中项的属性不确定时

当我们要渲染的项中属性不确定，无法在el-table-column的prop直接进行定义，需要使用v-for循环循环

    //假定我们要渲染的column是动态的无法提前确定，下面的fetchData是我们从接口中获取的数据并提取出key
    const fetchData = ['age','address','phone','email'];
    
    <template>
        <el-table :data='tableData'>
            <el-table-column :prop='t' v-for='t of fetchData' :key='t'>
        </el-table>
    </template>