element-ui、el-table使用V-for循环动态添加表头和数据

element-ui、el-table使用V-for循环动态添加表头和数据

element-ui动态生成表头和数据；

话不多说直接上代码，简单易懂，很适合小白https://element.eleme.io/#/zh-CN/component/table

1.template

<el-table :data="listArr">

        <el-table-column
             v-for="title in tableTitleList"
             :prop="title.prop"
             :label="title.name"
             align="center"
             :key="title.prop"
             :index="title.index">
        </el-table-column>
</el-table>

 2.js

data () {
    return {
        listArr: [
            {
            id1:"北京1",
            id2:"上海1",
            id3:"广东1"
            },
            {
            id1:"北京2",
            id2:"上海2",
            id3:"广东2"
            }
        ],
        tableTitleList: [
            {prop:"id1",
            name:"住址1"},
            {prop:"id2",
            name:"住址2"},
            {prop:"id3",
            name:"住址3"}
        ]
    }
}