el-table使用V-for动态添加表头和数据

prop 属性指定了每一列要显示的数据在 listArr 中的对应字段

label 属性是每一列的标题

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

// 表格每一行的内容  
listArr: [  
    {  
    purposeSystem: "系统一",  
    originIp: "12.32.11.1",  
    purposeIp: "34.223.1.2",  
    purposePort: '9010',  
    networkProtocol: 'TCP',  
    serveName: '测试服务1',  
    portUsage: '访问龙泉图片网关',  
    handler: ''  
    },  
    {  
    purposeSystem: "系统二",  
    originIp: "112.322.11.1",  
    purposeIp: "2.23.1.2",  
    purposePort: '9070',  
    networkProtocol: 'TCp/UPD',  
    serveName: '测试服务2',  
    portUsage: '访问蓬莱岛图片网关',  
    handler: ''  
    },  
]

// 表格标题  
tableTitleList: [  
    {prop: "purposeSystem", name: "目的系统"},  
    {prop: "originIp", name: "源IP"},  
    {prop: "purposeIp", name: "目的IP"},  
    {prop: "purposePort", name: "目的端口"},  
    {prop: "networkProtocol", name: "端口类型"},  
    {prop: "serveName", name: "服务名称"},  
    {prop: "portUsage", name: "端口用途"},  
    {prop: "infoRemark", name: "备注"}  
]